A course by Frontend.fyi

Login

Buy PRO for €149

Course included in Frontend.fyi PRO (no subscription!)

Crafting Beautiful Experiences With Framer Motion

Jeroen Reumkens

Taught by Jeroen ReumkensFounder of Frontend.fyi

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 Framer Motion has to offer. Together, we take a look at all of Framer's API's, and craft impressive real-world projects.

Despite plain CSS getting more powerful every week, with amazing features like scroll driven animations , and view transitions , it still has its limitations. One of the biggest limitations is that you shouldn't animate all properties of an element. For example animating properties like width, height, top, or left, could cause janky animations. It is best practice to manipulate an elements size and position by animation properties like translateX/Y and scale.

But why would Framer Motion do this any better than plain CSS?

Framer Motion packs some ✨ magic ✨, which they call Layout Animations. When using layout animations to resize an element in width / height, Framer Motion uses calculations under the hood, to convert this resize into a scale and transform animation 🤯. This results in animations that always perform significantly better than plain CSS animations — almost without needing to think about this!

It doesn't only do this for width/height though!

However, this magic doesn't stop at performant animations for width and height! Framer is even capable of animating really complex layouts from one into another. For example, animating two elements from flex-direction: row into row-reverse. Take a look at the magic in action below!

I'm left
You sure about that? 🤔
<div
class={twMerge(
"flex justify-center gap-4 py-5",
direction === "row" ? "flex-row" : "flex-row-reverse"
)}
>
<motion.div layout>I'm left</motion.div>
<motion.div layout>You sure about that? 🤔</motion.div>
</div>

The code above is really the only thing you have to do for this magic. Switch some class around that updates the flex direction, and make sure that the elements you want to animate are a motion.* component that both have the layout property. That's it!

If you inspect the animation above, you see the class changes from flex-row to flex-row-reverse and vice versa, and from that point on Framer Motion takes over. You notice Framer Motion does a complicated transform animation to move the elements to the position where the new flex direction would put them. PLUS it animates it too. As soon as the elements are in the correct position, Framer removes all inline styles again, and the CSS takes over.

Exactly these things make Framer Motion so powerful!

In the course we'll dive into many more benefits of Framer Motion. For example their amazing animation timelines for creating complicated multi step animations — a relative new API that enables us to create powerful multistep animations like we did in our Amie.so rebuild . We'll also dive deeper into how Framer Motion compares to plain CSS animations, and things like the scroll driven animations.

"So... You are one of these people building all your animations in JavaScript!!"

I'm a big proponent of using every tool for what it does best. And you know what, CSS is getting even better by the week! I will teach you the right balance, and to judge when to use Framer Motion and when to stick with CSS.

Not even every animation on this page is using Framer Motion. Why would I if CSS does the job just as well, and perhaps even better?

Course contents

So what DO I teach in this course? In this course we start with taking a look at the basic API's of Framer Motion. These API's are the building blocks of all the animations we'll create in this course. The further you get into the course, the more we combine these API's to create real world examples together.

Framer Motion


Introduction

What is Framer Motion, and how does it compare to CSS Animations. When should you use what?

my-first-animation.tsx
1
2
3

<motion.div> <h1>Hello World</h1></motion.div>

Your first animation

We start with the basics first. They are the foundation you need to create the most stunning animations.

Different types of animations

Keyframe animations, scroll animations, layout animations (the real power!!), and so much more.

responsive

Make your animations work on all devices.

Accessibility

A topic that's very important on the web in general. The same goes for animations. We discuss the implications animations could have on accessibility, and how we can solve them.

Projects!

We build multiple real world projects together,
strengthening our new skills.

But why would you want to add these annoying useful animations to your site?

Using animations the right way, enables your user to 'think less', and enrich the experience by adding charm and personality to a UI. Let's dive into these benefits a bit more, and take a look at a few examples.

Motion delights users

Making people smile when using my products, is the number one reason why I enjoy frontend so much. Small unexpected details, turn a boring task into a memorable experience. Keeping this in the back of your mind when building your products, will help you build experiences that stand out.

Still, we often neglect the importance of adding a touch of fun to the web. It usually ends up on the backburner, saved for last-minute fixes when we're already way past our deadlines.

But keep in mind, it's all about balance. Don't go overboard with the fun factor, as that could ultimately harm the end product.

Add a bit of fun

Not every website is a good fit to add some confetti. Today is the day though — you've already read quite a bit. Which means it's time to celebrate this with some poppers. Can you find the easter eggs? Don't forget to turn on your sound too! 😉

0123456789
0123456789
0123456789

Animations grab attention

Motion is able to grab attention, highlight important elements or actions happening in the UI, and focus on key UI elements on the page. Without creating unneccesary distractions.

z
Jane Doe

You are on Do Not Disturb

Do you want to update your status?

Mom

Missed Call

Work

Missed Call

Work

Missed Call

Mom

Missed Call

Mom

Missed Call

Animations make connections clear

Using animations makes it possible to show the relationship between two elements.

Motion is a profession on its own

As frontend developers, we don't have to be the sole creators of every fancy animation. Coming up with satisfying and consistent animations, takes a lot of skill and effort. However, we should be familiar with the available options and understand the potential consequences of the animations we incorporate. This way we're able to collaborate with (motion) designers on crafting the best animations for our products.

Explore the full curriculum

Make sure to check out the full course curriculum. It also contains some free lessons for you to get even more excited!

Frequently asked questions

Let's start learning Framer Motion!

This course is included in Frontend.FYI PRO.

A one-time purchase of €149.99 gives you access to all pro courses and paid tutorials. Including future releases.

And start learning Framer Motion right away!