flâneur — a map of the web's best reading

What makes an animation feel right?

animations.dev · 1 words · saved by 1 readers

I’m sure you’ve seen an animation that made you think, “Wow, that feels good!”. But can you explain why it felt that way? What actually made it work? That’s what we’ll be unpacking in this lesson, why some animations feel better than others. Does this animation feel good to you? Probably not.   How about this one? Better, right? The second one uses an easing type that works better with this type of animation, which helps make it feel more natural. The first one has a linear easing type, which feels robotic and unnatural as almost nothing in the world around us moves at a constant speed. It has no energy to its movement. It feels lifeless. An animation feels right when it mirrors the physics we experience every day. It feels right when you are not surprised by the way it animates, because it feels familiar. Next, consider these two buttons: The right one feels better because the subtle blur fills the visual gap between the object’s states. Without it, the eye sees two distinct object

animations.dev

Explore this link on the map →

saved by

related reading