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
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 commentsWant to join the conversation?
Sign in to commentSimilar courses
Complete Guide to Qwik
Sources: fullstack.io
Master Qwik with practical examples and learn to create scalable, fast web applications. Improve user and developer experience with this intuitive framework.
Next Auth V5 - Продвинутое руководство
Sources: Code With Antonio
In this 8-hour course, you will learn how to create your own authentication toolset using the latest version of Next Auth v5 (Auth.js). We...
8 hours 1 minute 8 seconds
The Complete Junior to Senior Web Developer Roadmap (2023)
Sources: udemy
This is the tutorial you've been looking for to no longer be a junior developer, level up your skills, and earn a higher salary. This extensive course doesn’t j
37 hours 7 minutes 57 seconds
Web Components Demystified
Sources: Scott Jehl
If you are like me, then you have probably been hearing a lot about web components lately. Many of us are looking for ways to integrate web components into...
7 hours 51 minutes 36 seconds