Why do some animations feel better than others?

Do you ever see an animation and think, "Wow, that feels good"? Or maybe you've seen one and didn’t really like it?

Can you actually describe what makes the difference?

Let’s try to do it here 👇

Great animations feel more natural

Linear animations are very rarely used, they feel robotic and unnatural as almost nothing in the in the world around us moves at a constant speed.

Using spring animations, or an easing type that resembles something in the real world can make an animation feel familiar and less artificial.

I used a spring animation with 0.2 bounce and a duration of 400ms for this trash interaction for example.

Great animations are fast

Users want instant feedback on their actions.

When they click on a button, a modal should appear in 200ms or less, preferably with an ease-out curve to make it seem even faster while maintaining decent motion.

Speed of our animations can also alter the perceived performance of your app. Which loading spinner below will load the app faster?

I’d say the one on the right ☝️

It moves fast and tells me that it’s working hard to load the data for me.

Great animations have a purpose

It's easy to start adding animations everywhere.

But then the user becomes overwhelmed and animations lose their impact. We need to pace them through the experience and add them in places where they enrich the information on the page.

A good example is this animation I made for Vercel explaining how v0 works. While this animation is arguably entertaining to watch, it's also insightful 👀

We can also use it to indicate a change in state like in this app store cards example 👇

When you think about adding an animation, you should consider how often the user will see it.

I use Raycast's command menu a lot. So it would be annoying and tiring to see the same animation hundreds of times a day.

🎓 Animations on the web

If you want to craft animations that make people feel something, you can check out Emil's course here.

It teaches you how to think about animations and how to actually build them as well 💪