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.
Animating the web with Framer Motion
6h 3m 51s
English
Paid
About the Author: Jeroen Reumkens
I love to teach you the craft in frontend development. I'm a frontend developer from The Netherlands, with well over a decade of professional experience in frontend development. During my career I've worked at multiple smaller and bigger agencies, as well as discovered the world of freelancing. During that time I've built lots of things, ranging from Facebook apps (Yes I'm that old), to marketing websites with super sexy animations, complicated single page self service portals and everything in between.
Watch Online 78 lessons
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 subscription