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
Clean Code: Writing Code for Humans
Sources: pluralsight
Anyone can write code a computer can understand, but professional developers write code *humans* can understand. Clean code is a reader-focused development styl
3 hours 10 minutes 36 seconds
The Complete 2023 Web Development Bootcamp
Sources: udemy
Welcome to the Complete Web Development Bootcamp, the only course you need to learn to code and become a full-stack web developer. With over 12,000 ratings and a 4.8 average, my...
62 hours 32 minutes 23 seconds
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