Frontend.FYI

October 7th

Let's learn about Layout Animations!

Hey there!

I'm super excited to teach you to add some✨ magic ✨ to your animations. Time to dive into my latest course module: Framer Motion Layout Animations.

If you’ve seen any cool Framer Motion examples online, there’s a good chance that 95% of what impressed you was thanks to layout animations. So the past months I've dived into all its intricacies and came up with the best way to teach you how to recreate these animations yourself. Let's dive in!

Can't wait to start learning? Go to the module right away

Module 7: Layout Animations

When layout animations first released, its API's were called Magic Motion. A name that today still describes perfectly what layout animations are. With layout animations we simply define a start and ending state of our animation, and let Framer Motion figure out how to animate between them — in a performant way! Magic ✨

Form submit animation

The module starts off with the basics of layout animations. We will compare it with an animation that we can also still pull of with CSS, by recreating the form submit animation seen below.

We'll also discuss how Layout Animations differ from your CSS approach, and why one might be better than the other.

A behind the scenes look

Next we'll take a detailed look at what happens behind the scenes of Layout Animations. This explains why Layout Animations are able to animate things that aren't possible with CSS animations alone.

This new gained knowledge we then put to the test by animating flex direction, a CSS property that can not be animated by CSS alone, yet Framer Motion pull this off for us.

And it does so in a performant way too!

Challenges in Layout Animations

It's not all rainbows and sunshine though. Therefore we make a brief detour around some of at the challenges in Layout Animations I encounter most often. Resulting in a super handy cheat-sheet in case you ever end up struggling to create an animation yourself.

Making more advanced animations

From here it starts to become more advanced with every lesson.

We combine layout animations with <AnimatePresence> to create this beautiful navigation animation..

...before taking a look at shared layout animations to effortlessly create this moving pill animation.

To eventually combining most of what we've learned by building this Music Player interface 🤤

All these animations can be created with very little effort, by using Layout Animations. Let me show you how!

Time to start learning! Go to the platform

​

Enjoy the new lessons! I’m here for any feedback or questions.

Jeroen.
​

Hi, I'm Jeroen After over a decade of writing frontend code and teaching my colleagues, I decided it was time to teach a wider audience the craft in frontend engineering. Which is when I started Frontend.FYI.