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
Mocking Techniques in Vitest
Sources: Artem Zakharchenko
Let's admit it, mocking can be really confusing. First, you need to understand what exactly to mock. Then, find the right way to do it so it doesn't worsen...
1 hour 30 minutes 36 seconds
![Testing Fundamentals [EpicWeb]](https://cdnq.courseflix.net/course/thumbnail/testing-fundamentals-epicweb-320x180.webp "Testing Fundamentals [EpicWeb]")
Testing Fundamentals [EpicWeb]
Sources: Artem Zakharchenko
In this workshop, Artem Zakharchenko, testing expert and creator of the Mock Service Worker API mocking library, will guide you through creating your own versio
5 hours 16 minutes 16 seconds