In the five years since Framer Motion was released, CSS animation APIs have come a long way. Do you still need to use Framer Motion?

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The post discusses five new CSS features that might make Framer Motion unnecessary. It explores enter animations, independent transforms, springs, scroll-linked animations, and layout animations. While CSS has improved, the author still prefers the Framer Motion API for its simplicity and better user experience.

Do you still need Framer Motion?

Good information. We are using framer motion heavily in our project. This post is an eye opener.

I use this in my sveltekit project and I can say that Its so simple, for example
<pre><code>$effect(() =&gt; {
 animate(&#x27;.dialog&#x27;, 
 { 
 scale: [0.9, 1], 
 opacity: [0, 0, 100],
 y: [60, 0] 
}, animationOptions);
	});
</code></pre>
you could have all these animations in a different file and just import them and run in a effect or onMount!.
Instead of creating components. yk.
<pre><code>	$effect(() =&gt; {
		animatePartialListItems();
		isLoaded = true;
	});
</code></pre>
and its 4.2K gzipped man… that is 10x smaller compared to framer motion, but idk if you could achieve everything with motion.dev, but if you need to move something around and make it small or big or rotate, I’d prefer motion.dev

This was an amazing article, I learned some great new CSS tips. And of course it’s easy to see why we all love Framer Motion. Can’t get much easier.