Animating the web with Framer Motion

6h 3m 51s
English
Paid
October 10, 2024

Making smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through everything of Framer Motion has to offer. Together, we take a look at all of Framer's API's, and craft impressive real-world projects.

Watch Online Animating the web with Framer Motion

Join premium to watch
Go to premium
# Title Duration
1 001 - Introduction to the course 02:17
2 002 - About the platform 04:20
3 003 - Framer vs Framer Motion 01:31
4 004 - Comparing Framer Motion With CSS Animation 04:48
5 005 - Framer Motion's core principles 01:32
6 006 - Installing Framer Motion 03:27
7 007 - The Motion Component 04:11
8 008 - Creating your first animation 03:45
9 009 - Adding a from state to the animation 06:00
10 010 - Changing the default transition 09:36
11 011 - Make the animation loop with keyframes 08:04
12 012 - Adding interactivity_ Hover, focus and tap 05:17
13 013 - Build a responsive multi-step animation 03:15
14 014 - Build a responsive multi-step animation 10:23
15 015 - Motion values, the core of Framer Motion 08:27
16 016 - Make it bounce_ useSpring 03:31
17 017 - Transforming motion values with useTransform 04:14
18 018 - Making elements draggable & practice with useTransform 03:07
19 019 - Making elements draggable & practice with useTransform 01:32
20 020 - Making elements draggable & practice with useTransform 05:07
21 021 - Animating CSS variables (custom properties) 03:52
22 022 - Stepping up our game 02:29
23 023 - Animating elements removed from the DOM 06:34
24 024 - Animation variants 08:40
25 025 - Let's do a small refactor 0 01:06
26 026 - Let's do a small refactor 1 06:22
27 027 - Let's do a small refactor 2 15:02
28 028 - Animating child components 0 03:20
29 029 - Animating child components 1 01:21
30 030 - Animating child components 2 04:23
31 031 - Making your animations responsive 03:05
32 032 - Responsiveness without media queries 18:25
33 033 - Different behavior per breakpoint 0 06:01
34 034 - Different behavior per breakpoint 1 01:23
35 035 - Different behavior per breakpoint 2 03:42
36 036 - Two other solutions to make responsive animations 03:42
37 037 - Put our new skills to the test 0 02:03
38 038 - Put our new skills to the test 1 06:46
39 039 - Trigger animations on scroll 0 02:39
40 040 - Trigger animations on scroll 1 00:20
41 041 - whileInView 0 10:27
42 042 - whileInView 1 01:38
43 043 - whileInView 2 03:13
44 044 - The useInView hook 0 03:17
45 045 - The useInView hook 1 01:52
46 046 - The useInView hook 2 04:07
47 047 - Scroll-driven animations 0 04:49
48 048 - Scroll-driven animations 1 00:06
49 049 - useScroll_ Making scroll-driven animations 0 04:49
50 050 - useScroll_ Making scroll-driven animations 1 03:44
51 051 - useScroll_ Making scroll-driven animations 2 01:10
52 052 - Tracking an element's position on screen 10:31
53 053 - Practicing the differences between scroll-driven and scroll-triggered animations 0 01:47
54 054 - Practicing the differences between scroll-driven and scroll-triggered animations 1 11:41
55 055 - Scroll animations with position sticky 0 09:06
56 056 - Scroll animations with position sticky 1 00:20
57 057 - Scroll animations with position sticky 2 02:19
58 058 - Scroll animations with position sticky 3 06:07
59 059 - The most powerful feature of Framer Motion 03:38
60 060 - Making your first layout animation 0 06:08
61 061 - Making your first layout animation 1 05:14
62 062 - Animating the impossible 0 06:45
63 063 - Animating the impossible 1 01:23
64 064 - Animating the impossible 2 03:26
65 065 - Challenges in layout animations 0 01:34
66 066 - Challenges in layout animations 1 01:29
67 067 - Challenges in layout animations 2 02:41
68 068 - Challenges in layout animations 3 05:01
69 069 - Challenges in layout animations 4 02:55
70 070 - Challenges in layout animations 5 01:28
71 071 - Showing new elements 0 04:08
72 072 - Showing new elements 1 07:25
73 073 - Shared layout animations 0 03:08
74 074 - Shared layout animations 1 03:27
75 075 - Even more advanced shared layout animations 0 03:00
76 076 - Even more advanced shared layout animations 1 10:50
77 077 - Bonus - The alternative to position absolute 0 09:53
78 078 - Bonus - The alternative to position absolute 1 03:36

Similar courses to Animating the web with Framer Motion

GSAP3: Beyond the Basics

GSAP3: Beyond the BasicsCarl (Creative Coding Club)

Duration 8 hours 25 minutes 41 seconds
Epic Web. Ship Modern Full-Stack Web Applications
Code With Antonio Workshops

Code With Antonio WorkshopsCode With Antonio

Duration 17 hours 3 minutes 7 seconds
The Ultimate Web Scraping Course
Frontend System Design
Remix Bootcamp: Zero to Mastery

Remix Bootcamp: Zero to Masteryzerotomastery.io

Duration 21 hours 2 minutes 22 seconds
SolidJS: The Complete Guide
Developing LLM App Frontends with Streamlit