In this lesson, we answer a crucial question many have asked me: when to rely on the simplicity of CSS animations and when to harness the power of Framer Motion.

If you’re learning a new shiny tool, like Framer Motion, you want to use it for everything – I get that. But it’s important to always remind yourself of what CSS animations can already do for you.

When would you opt for CSS animations?

There is a lot you can accomplish with CSS animations. Lately CSS gained even more superpowers with all the new features that have been released. View transitions (vanilla JS example, React Drag and Drop Kanban Board example) is for example one of the great new and powerful features released recently.

So what are some uses cases I consider ‘simple enough’ to stick with CSS?

”Simple” transitions

If you want to transition a simple property (for example on hover), like opacity, transform or background-color, you should always opt for CSS transitions. No need to load an extra JavaScript library for that.

”Simple” animations

If you want to make a simple keyframe animation that’s doable in a maintainable way in CSS – go for it!

CSS animations don’t load extra JavaScript

To me this is one of the most important factors. If I don’t need to load an additional JavaScript library, I won’t. It’s that simple.

This also means if I already have Framer Motion loaded because of other more advanced animations, I might use it a little bit quicker than I usually would. But still take the previous points into account!

Define your own rules

Defining exact rules when to use CSS animations and when to use Framer Motion is hard. The most important take-away is that you should always challenge yourself to make the animation in CSS. It’s also a fun learning experience!

Switching to Framer Motion

Framer Motion is always my second option. When would it make sense to start thinking about using Framer Motion?

Complex (multi step) animations

You have to define a feeling for this. But at some point it doesn’t make sense to keep defining your animations in CSS keyframes. Once you start to feel like you are for example repeating yourself or adding many dirty hacks to get it to work in CSS, it might be time to add some JavaScript power to the mix.

When math is involved

If you need to do some math to calculate the animation, you should opt for Framer Motion. It’s much easier to do math in JavaScript than in CSS.

When you need to use many variables

If there’s only a single or a few variables involved, it might still be possible to build it with CSS custom properties. Once you go beyond that, it might be time to switch to Framer Motion.

When adding interactivity

CSS Animations are mostly static. As soon as you want to add interactivity to your animations, Framer Motion begins to become a lot more likely.

But don’t forget! Also in CSS you can make selectors that change depending on for example a checkbox being checked. So this way you might still be able to add interactivity with CSS only.

Animating ‘impossible’ things

Framer Motion is also very good at animating things that can’t be animated with CSS by default. In Framer Motion that’s called Layout Animations. If you haven’t heard of these yet, you are in for a treat! It for example helps enables you to animate a change in flex direction without thinking about it!

Conclusion: The Art of Selective Complexity

In the end, it’s all about choosing the right tool for the job. CSS animations offer simplicity and performance for most of your needs. But for those moments when you’re pushing the boundaries of interactivity and complexity in a React environment, Framer Motion is your go-to.

This approach not only makes your development process more efficient but also ensures a delightful user experience.