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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 78 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Animating the web with Framer Motion

0:00
/
#1: 001 - Introduction to the course

All Course Lessons (78)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

B-Sides, Bonuses and Oddities

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)

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

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

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