English | MP4 | AVC 3840×2160 | AAC 44KHz 2ch | 78 Lessons (6h 4m) | 7.23 GB
Animating the web with Framer Motion
The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.
You’ll learn not just to animate, but to enhance user experience gracefully. Your skills will not only slide to the next level – they’ll animate there, bringing a touch of elegance and functionality to every project!
Course in progress, new videos will be added as the author uploads them.
Table of Contents
1 Introduction to the course
2 About the platform
3 Framer vs Framer Motion
4 Comparing Framer Motion With CSS Animation
5 Framer Motion’s core principles
6 Installing Framer Motion
7 The Motion Component
8 Creating your first animation
9 Adding a from state to the animation
10 Changing the default transition
11 Make the animation loop with keyframes
12 Adding interactivity_ Hover, focus and tap
13 Build a responsive multi-step animation
14 Build a responsive multi-step animation
15 Motion values, the core of Framer Motion
16 Make it bounce_ useSpring
17 Transforming motion values with useTransform
18 Making elements draggable & practice with useTransform
19 Making elements draggable & practice with useTransform
20 Making elements draggable & practice with useTransform
21 Animating CSS variables (custom properties)
22 Stepping up our game
23 Animating elements removed from the DOM
24 Animation variants
25 Let’s do a small refactor 0
26 Let’s do a small refactor 1
27 Let’s do a small refactor 2
28 Animating child components 0
29 Animating child components 1
30 Animating child components 2
31 Making your animations responsive
32 Responsiveness without media queries
33 Different behavior per breakpoint 0
34 Different behavior per breakpoint 1
35 Different behavior per breakpoint 2
36 Two other solutions to make responsive animations
37 Put our new skills to the test 0
38 Put our new skills to the test 1
39 Trigger animations on scroll 0
40 Trigger animations on scroll 1
41 whileInView 0
42 whileInView 1
43 whileInView 2
44 The useInView hook 0
45 The useInView hook 1
46 The useInView hook 2
47 Scroll-driven animations 0
48 Scroll-driven animations 1
49 useScroll_ Making scroll-driven animations 0
50 useScroll_ Making scroll-driven animations 1
51 useScroll_ Making scroll-driven animations 2
52 Tracking an element’s position on screen
53 Practicing the differences between scroll-driven and scroll-triggered animations 0
54 Practicing the differences between scroll-driven and scroll-triggered animations 1
55 Scroll animations with position sticky 0
56 Scroll animations with position sticky 1
57 Scroll animations with position sticky 2
58 Scroll animations with position sticky 3
59 The most powerful feature of Framer Motion
60 Making your first layout animation 0
61 Making your first layout animation 1
62 Animating the impossible 0
63 Animating the impossible 1
64 Animating the impossible 2
65 Challenges in layout animations 0
66 Challenges in layout animations 1
67 Challenges in layout animations 2
68 Challenges in layout animations 3
69 Challenges in layout animations 4
70 Challenges in layout animations 5
71 Showing new elements 0
72 Showing new elements 1
73 Shared layout animations 0
74 Shared layout animations 1
75 Even more advanced shared layout animations 0
76 Even more advanced shared layout animations 1
77 Bonus – The alternative to position absolute 0
78 Bonus – The alternative to position absolute 1
Resolve the captcha to access the links!