Comparing Framer Motion With CSS Animations
This free lesson is part of the Framer Motion course.
A lifetime subscription (€149 once) to Frontend.FYI PRO gives you instant access to all content.
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?
If you want to transition a simple property (for example on hover), like
If you want to make a simple keyframe animation that’s doable in a maintainable way in CSS – go for it!
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
When math is involved
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!
Making the Right Choice
For animations that are straightforward and don’t require complex logic, stick with CSS. It’s about writing less code and keeping your site’s performance optimized. This should always be your first choice.
When you find yourself needing more advanced features like intricate gesture controls or syncing animations with each other or with application state, that’s your cue to bring in Framer Motion.
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.