Animating the web with Framer Motion
6h 3m 51s
English
Paid
Course description
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
Watch Online Animating the web with Framer Motion
0:00
/ #1: 001 - Introduction to the course
All Course Lessons (78)
# | Lesson Title | Duration | Access |
---|---|---|---|
1 | 001 - Introduction to the course Demo | 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 |
Unlock unlimited learning
Get instant access to all 77 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses

B-Sides, Bonuses and Oddities
Sources: Carl (Creative Coding Club)
After completing the basics of GreenSock in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes...
17 hours 55 minutes 38 seconds

Build & Test Accessible Web Apps | Testing Accessibility (PRO)
Sources: Marcy Sutton
Comprehensive Accessibility Training for Creating High-Quality Web Applications A self-paced course designed to teach the principles and effective...
16 hours 30 minutes 59 seconds

Full-Stack Fundamentals 1 - Frontend
Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds

SVG Animation with GreenSock
Sources: Carl (Creative Coding Club)
Learn how to create SVGs in design programs, embed them in web pages, edit them using code, and animate them with GreenSock.
12 hours 34 minutes 48 seconds
Want to join the conversation?
Sign in to comment