frontend.fyi

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 first

Course lessons

All lessons can be previewed for free.
📖

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
📖

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
📖

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
📖

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
📖

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
📖

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
📖

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
📖

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 🤩
📖

9. Important considerations

In this chapter I gathered a few topics that could cross your mind when working with Framer Motion.

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.

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.

soon 🤩

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!

Launching very soon! 🚀

Frequently asked questions