Advanced animation patterns with Framer Motion

Propagation

One of the first advanced patterns I got to encounter when I tried to add some micro-interactions with Framer Motion on my projects is propagation. I quickly learned that it's possible to propagate changes of variants from a parent motion component to any child motion component. However, this got me confused at the beginning because it broke some of the mental models I originally had when it comes to defining animations.

Remember in my previous blog post when we learned that every Framer Motion Animation needed 3 properties (props) initial, animate, transition, to define a transition/animation? Well, for this pattern that's not entirely true.

Framer Motion allows variants to "flow down" through every motion child component as long as these motion components do not have an animate prop defined. Only the parent motion component, in this case, defines the animate prop. The children themselves only define the behavior they intent to have for those variants.

A great example where I used propagation on this blog is the "Featured" section on the home page of this blog. When you hover it, the individual cards "glow" and this effect is made possible by this pattern. To explain what really is happening under the hood, I built this little widget below where I reproduced this effect:

You can see that hovering (or tapping if you're on mobile) the card or even the label above it triggers the glow effect. What kind of sorcery is this?! By clicking on the "perspective" button, you can see what happens under the hood:

1. There's an "invisible" motion layer covering the card and the label. This layer holds the whileHover prop which sets the variant "hover"
2. The "glow" itself is a motion component as well, however, the only thing it defines is its own variants object with a hover key.

Thus when hovering this invisible layer, we toggle the "hover" variant and any child motion component having this variant define in their variants prop will detect this change and toggle the corresponding behavior.

Now let's apply what we learned about the propagation mechanism of Framer Motion! In the playground below you'll find a motion component with a "hover" animation. When hovering it, a little icon will show up on the right end side of that component. You can try to:

• Modify the variant key used in the motion component wrapping the button and see that now that it defers from what's being set by the parent component, the animation does not trigger and the button is not visible on hover.
• Set ananimate prop on the motion component that wraps the button and see that it now animates on its own and does not consume the variant set by the parent on hover.

Animate components when they are unmounting

So far, we've only seen examples of animation being triggered either on mount or following some specific events like hover or tap. But what about triggering an animation right before a component unmounts? Some sort of "exit" transition?

Well, in this second part, we'll take a look at the Framer Motion feature that addresses this use case and also the one that impressed me the most: AnimatePresence!

I tried to implement some kind of exit animations before learning about AnimatePresence, but it was hacky and always required extra code to set a proper "transitional" state (like isClosing, isOpening) and toggle the corresponding animation of that state. As you can imagine, it was very error-prone.

On the other hand, AnimatePresence is extremely well thought of and easy to use. By simply wrapping any motion component in an AnimatePresence component, you'll have the ability to set an exit prop!

In the interactive widget below, I showcase 2 versions of the same component:

• the one on the left is not wrapped in AnimatePresence
• the second one, however, is wrapped

That's the only difference code-wise. But as you can see the difference is pretty striking!

We now have a new awesome tool to use to make our transitions even better! It's time it a try in the playground below:

• Try to remove the AnimatePresence component. Notice how this makes Framer Motion skip the animation specified in the exit prop.
• Try to modify the animation defined in the exit prop. For example, you could make the whole component scale from 1 to 0 while it exit. (I already added the proper animation objects commented in the code below 😄)

Layout animations

We now know how to:

• propagate animations throughout a set of motion components
• add an exit transition to a component so it can unmount gracefully

Those advanced patterns should give us the ability to craft some pretty slick transitions right? Well, wait until you hear more about how Framer Motion can handle layout animations!

What is a "layout animation"?

A layout animation is any animation touching layout related properties such as:

• position properties
• flex or grid properties
• width or height
• sorting elements

But to give you a little bit more of an idea of what I'm talking about here, let's try to take a look at the playground below that showcases 2 versions of the same component:

• the first one animates justify-content property between flex-start and flex-end by simply using the patterns we only know so far: setting this property in the animation prop
• the second one uses a new prop: layout. It's here set to true to tell Framer Motion that a "layout related property", and thus by extension the layout of the component, will change between rerenders. The properties themselves are simply defined in CSS as any developer would do normally when not using Framer Motion.

We can observe multiple things here:

1. The first example does not work, it looks here that Framer Motion can't transition between justify-content properties the same way you'd transition an opacity from 0 to 1 gracefully.
2. The second component however transitions as expected between the flex-start and flex-end property. By setting layout to true in the motion component, Framer Motion can transition the component's justify-content property smoothly.
3. Another advantage of the second component: it does not have as much of a "hard dependency" with Framer Motion as the first one. We could simply replace the motion.div with a simple div and the component itself would still work

Shared Layout Animation

We now know what layout animations are and how to leverage those for some specific use cases. But what happens if we start having layout animations that span several components?

In the more recent versions of Framer Motion, building shared layout animations has been greatly improved: the only thing we need to do is set a common layoutId prop to the components that are part of a shared layout animation.

Below, you'll find a widget that showcases an example of shared layout animation.

When clicking on one of the emojis in the example above you will notice that:

• the border will gracefully move to the newly selected element when the common layoutId is enabled
• the border will abruptly appear around the newly selected element when the common layoutId is disabled (i.e. not defined or different)

All we need to do to obtain this seemingly complex animation was to add a prop, that's it! ✨ In this example in particular, all I added is a common layoutId called border to every instance of the blue circle component.

It's now time to give a try at what we just learned! This last example compiles all the previous playgrounds together to create this list component. This implementation includes:

• using the layout prop on the ListItem component to animate reordering the list
• using the layout prop on the list itself to handle resizing gracefully when items are expanded when clicked on
• other instances of the layout prop used to prevent glitches during a layout animation (especially the ones involving changing the height of a list item)

You can try to:

• comment out or remove the layout prop on the ListItem and see that now, reordering happens abruptly 👉 no more transition!
• comment out or remove the LayoutGroup and notice how this affects all the layout animations
• try to add the layout prop on the <Title/> component and see it gracefully adjusting when the height of an item changes

Conclusion

Congrats, you are now a Framer Motion expert 🎉! From propagating animations to orchestrating complex layout animations, we just went through some of the most advanced patterns that the library provides. We saw how well designed some of the tools provided are, and how easy it is thanks to those to implement complex transitions that would usually require either much more code or end up having a lot more undesirable side effects.

I really hope the examples provided in this blog post helped illustrate concepts that would otherwise be too hard to describe by text and that, most importantly, were fun for you to play with. As usual, do not hesitate to send me feedback on my writing, code, or examples, I'm always striving to improve this blog!

Did you come up with some cool animations after going through this guide?

Don't hesitate to send me a message showcasing your creations!

Want to see more examples?

The Framer Motion documentation has tons of those to play with on Codepen.

If you want to dig a bit deeper, below is the list of links to check out the implementations of the widgets featured in this article:

• Animation Presence Widget
• Shared Animation Layout