Crafting Beautiful Experiences With Framer Motion

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 animation 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!

1
<div
2
  class={classs(
3
    "flex justify-center gap-4 py-5",
4
    direction === "row" ? "flex-row" : "flex-row-reverse"
5
  )}
6
>
7
  <motion.div layout>I'm left</motion.div>
8
  <motion.div layout>You sure about that? 🤔</motion.div>
9
</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 animations 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!!""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.

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.

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?

Turn offKeep on

Settings

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!

View all lessons