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 courseCourse 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?
4 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.1 Framer Motion's core principles free
- 2.2 Installing Framer Motion preview
- 2.3 The Motion Component preview
- 2.4 Creating your first animation preview
- 2.5 Adding a from state to the animation preview
- 2.6 Changing the default transition preview
- 2.7 Make the animation loop with keyframes free
- 2.8 Adding interactivity: Hover, focus and tap
preview
- 2.9 Build a multi-step animation preview
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.1 Trigger animations on scroll free
- 6.2 whileInView: Animate an element entering the viewport
preview
- 6.3 The useInView hook preview
- 6.4 Scroll-driven animations preview
- 6.5 useScroll: Making scroll-driven animations
preview
- 6.6 Tracking an element's position on screen
preview
- 6.7 Practicing the differences between scroll-driven and scroll-triggered animations
preview
- 6.8 Scroll animations with position sticky
preview
7. Layout 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 🤩
7. Layout animations
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
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!