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?
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 courseThe lessons
Unfinished modules will expand in number of lessons.
Use the lessons marked as "soon" as a guide of what the expect.
Use the lessons marked as "soon" as a guide of what the expect.
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
- 2.3 The Motion Component
- 2.4 Creating your first animation
- 2.5 Adding a from state to the animation
- 2.6 Changing the default transition
- 2.7 Make the animation loop with keyframes free
- 2.8 Adding interactivity: Hover, focus and tap
- 2.9 Build a multi-step animation
All APIs we discussed before are powered by motion values. You can however also use them directly, getting even more control over your animations.
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.
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?
Interactions make the animations come to life. We'll take a look at how scroll animations can add interactivity to pages.
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
In this chapter I gathered a few topics that could cross your mind when working with Framer Motion.
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.
Now we've learned many new Framer Motion APIs, it is time to practice them. This module will consist out of multiple small project where we build amazing animations together. Expect this also to be a module that will grow over time when I discover more fun animations to recreate.
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.