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
Additional
Course in progress, new videos will be added as the author uploads them.
About the Author: Jeroen Reumkens
Jeroen Reumkens is a Dutch front-end developer and educator focused on the animation side of web work — particularly Framer Motion (now motion.dev) as the dominant React animation library.
His CourseFlix listing carries Animating the Web with Framer Motion — a structured treatment of Framer Motion: the animation primitives, gesture handling, layout animations, the patterns for building polished UI motion, and the performance considerations that separate smooth motion from janky animation.
Material is paid and aimed at React developers ready to ship more polished animation in their applications. For broader content, see CourseFlix's Web Animations category page.
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 subscriptionRelated courses
-
Updated 1y agoAnimations on the web
By: Emil KowalskiLearn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. T2h 23m3/5 -
Updated 2y agoSVG Animation with GreenSock
By: Creative Coding ClubLearn how to create SVGs in design programs, embed them in web pages, edit them using code, and animate them with GreenSock.12h 34m -
Updated 10mo agoWeb Animations Full Course | Build a GTA VI Website & Master GSAP
By: JavaScript Mastery, Adrian HajdinMore than 70% of leading design-oriented companies use GSAP in production. Now you will not only be able to understand their approach, but you will.3h 31m
Frequently asked questions
What are the prerequisites for enrolling in this course?
This course does not specifically list prerequisites, but it is implied that students should have a basic understanding of web development and JavaScript. Familiarity with CSS and HTML will also be beneficial, especially when comparing Framer Motion with CSS animations in lesson 004.
What types of projects will I build during the course?
Throughout the course, you will work on real-world projects that utilize Framer Motion's capabilities. You will create animations that include responsiveness without media queries, scroll-triggered animations, and animations involving draggable elements. Lessons like 'Build a responsive multi-step animation' and 'Scroll animations with position sticky' offer hands-on practice.
Who is the target audience for this course?
The course is designed for web developers who want to enhance their animation skills using Framer Motion. It is suitable for those who wish to create smooth, performant animations for web applications and are looking to explore advanced animation techniques beyond basic CSS.
How does this course compare to other animation courses?
Unlike courses that focus solely on CSS animations, this course delves into Framer Motion's APIs and advanced animation techniques such as scroll-driven animations and animation variants. It provides a comprehensive understanding of animation responsiveness and interactivity, which might not be covered extensively in other animation courses.
What specific tools or platforms are covered in the course?
The course is centered around Framer Motion, a powerful tool for creating animations in React applications. Lessons cover installing Framer Motion, using components like the Motion Component, and leveraging hooks such as useTransform and useScroll for advanced animations.
What topics are not covered in this course?
The course does not cover basic web development or JavaScript fundamentals. It assumes a working knowledge of these areas and focuses specifically on animation techniques using Framer Motion. Additionally, it does not delve into non-React animation libraries or frameworks.
How much time should I expect to commit to complete the course?
The course consists of 78 lessons, each varying in length and complexity. While the total runtime is not specified, students should allocate time for both watching the lessons and practicing the exercises. Given the detailed exploration of Framer Motion, budgeting several weeks to complete the course is advisable, depending on your pace and prior experience.