A while back, I published a blog post, An Interactive Guide to Flexbox. It includes these interactive demo units:

Try fiddling with some of the controls along the bottom. The 4 child boxes rearrange themselves, growing and sliding as-needed to match the selected parameters.

It might not seem like much, but this sort of animation has historically been incredibly difficult to implement.

You might think you could solve this with a CSS transition, but sadly, it doesn't work:

.wrapper {
  display: flex;
  justify-content: center;
  /* 🚫 Won't do anything: */
  transition: justify-content 500ms;
}

CSS transitions allow us to smoothly interpolate between discrete numerical values. We can transition opacity from 0.5 to 1, or we can transition width from 200px to 1000px. But we can't transition layout properties like justify-content. It also can't animate DOM tree changes, like an element getting moved from one parent to another, or being reordered in the DOM.

In 2016, I decided I wanted to contribute a solution in this space. I built an animation library called react-flip-move, which tackles a very specific problem: list re-ordering.

It can handle situations like this:

I put a lot of work into my library, dozens and dozens of hours. It gave me an appreciation for how dastardly these problems are. It's incredibly complex.

A few years ago, I heard about a new animation library, Framer Motion. And honestly, it totally blew my mind.

It's so much more powerful than my little animation library. It can tackle stuff that seemed absolutely impossible to me. It's incredible.

In the years since, I've used Framer Motion for all kinds of stuff. It's become an indispensable part of my toolbox. It powers the Flexbox demo you saw above, along with many other interactive demos I've created. I use it in my Gradient Generator, as well as in my JavaScript Operator Lookup tool:

Now, I should warn you: Framer Motion has a pretty steep learning curve. It takes a lot of practice to truly become comfortable with how it works.

In this module, I don't want to stick to beginner-friendly examples. I want to show you the really cool stuff, the sorts of things I actually do in my work. As a result, the exercises in this module will likely be quite challenging.

I'll help you build a foundation with Framer Motion, and hopefully give you a sense of what's possible with this tool. But to really become a Framer Motion expert, you'll need to keep practicing.

I'm pumped to show you what we can do with Framer Motion. Let's do this!