Buy PRO for €149
Course included in PRO (no subscription!)
Crafting Beautiful Experiences With Framer Motion
The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.
You'll learn not just to animate, but to enhance user experience gracefully. Your skills will not only slide to the next level – they'll animate there, bringing a touch of elegance and functionality to every project!
Read more about the course firstCourse lessons
1. Introduction
A short intro to the course, what to expect from it, what skills are needed before starting this course, and why would you even bother learning Framer Motion?
5 lessons
1. Introduction
A short intro to the course, what to expect from it, what skills are needed before starting this course, and why would you even bother learning Framer Motion?
2. First steps
Assuming you have zero knowledge of Framer Motion, I take you by the hand creating your first animation. Together we explore all basic APIs of Framer Motion. Concepts that might sound boring at first, but are an essential foundation towards building more complex animations.
9 lessons
2. First steps
Assuming you have zero knowledge of Framer Motion, I take you by the hand creating your first animation. Together we explore all basic APIs of Framer Motion. Concepts that might sound boring at first, but are an essential foundation towards building more complex animations.
- 2.1Framer Motion's core principles Free 01:31
- Installing Framer Motion 03:26
- The Motion Component 04:10
- Creating your first animation 03:44
- Adding a from state to the animation 05:59
- Changing the default transition 09:35
- 2.7Make the animation loop with keyframes Free 08:03
- Adding interactivity: Hover, focus and tap 05:16
- Build a multi-step animation 13:36
3. Motion values
All APIs we discussed before are powered by motion values. You can however also use them directly, getting even more control over your animations.
5 lessons
3. Motion values
All APIs we discussed before are powered by motion values. You can however also use them directly, getting even more control over your animations.
4. Stepping up our game
If your animations are becoming slightly more advanced, there are a few more APIs that you might want to know about. Many result in less repetition and more readable code.
5 lessons
4. Stepping up our game
If your animations are becoming slightly more advanced, there are a few more APIs that you might want to know about. Many result in less repetition and more readable code.
5. How to make your animations responsive?
People visit the web with devices that all have different breakpoints. So what do we need to do if we want our animations to look different depending on a breakpoint?
5 lessons
5. How to make your animations responsive?
People visit the web with devices that all have different breakpoints. So what do we need to do if we want our animations to look different depending on a breakpoint?
6. Scroll animations
Scroll animations can make a page really immersive. In this module we'll be taking a look at how we can create them to enhance our pages even more.
8 lessons
6. Scroll animations
Scroll animations can make a page really immersive. In this module we'll be taking a look at how we can create them to enhance our pages even more.
- 6.1Trigger animations on scroll Free 02:38
- whileInView: Animate an element entering the viewport 15:15
- The useInView hook 09:13
- Scroll-driven animations 04:48
- useScroll: Making scroll-driven animations 09:41
- Tracking an element's position on screen 10:30
- Practicing the differences between scroll-driven and scroll-triggered animations 13:26
- Scroll animations with position sticky 17:29
7. Layout animations
Layout animations are a magical feature of Framer Motion. They allow you to animate from one state of layout to another, pretty much effortlessly!
8 lessons
7. Layout animations
Layout animations are a magical feature of Framer Motion. They allow you to animate from one state of layout to another, pretty much effortlessly!
- 7.1The most powerful feature of Framer Motion Free 03:37
- Making your first layout animation 11:20
- Animating the impossible 11:31
- Challenges in layout animations 16:02
- Showing new elements 11:31
- Shared layout animations 06:33
- Even more advanced shared layout animations 13:48
- Bonus: The alternative to position absolute 13:27
8. Complex animations
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
soon 🤩
8. Complex animations
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
9. Important considerations
In this chapter I gathered a few topics that could cross your mind when working with Framer Motion.
soon 🤩
9. Important considerations
In this chapter I gathered a few topics that could cross your mind when working with Framer Motion.
10. Gotchas with specific tools
There's a few things that are good to know when combining Framer Motion with specific tools. Only watch them if you work with these tools.
soon 🤩
10. Gotchas with specific tools
There's a few things that are good to know when combining Framer Motion with specific tools. Only watch them if you work with these tools.
11. Framer Motion's APIs
Some APIs are highly specific and would take too much out of the course's flow when discussed (in full) as part of a lesson. This module therefore combines any APIs that you might want to know more about, and gives you the guidance on where to find more information.
soon 🤩
11. Framer Motion's APIs
Some APIs are highly specific and would take too much out of the course's flow when discussed (in full) as part of a lesson. This module therefore combines any APIs that you might want to know more about, and gives you the guidance on where to find more information.
Projects
Throughout the lessons, you've tackled many exercises that focused on individual topics and mastered all of Framer Motion's APIs. Now, it's time to put your skills to the test.
This section is packed with exciting exercises that combine everything you've learned, helping you build truly amazing projects. Let's dive in!