What makes an animation feel right?
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
saved by
related reading
- The Easing Blueprintanimations.dev
- animations.devanimations.dev
- You Don't Need Animationsemilkowal.ski
- 7 Practical Animation Tipsemilkowal.ski
- Great Animationsemilkowal.ski
- animations.devanimations.dev
- Details That Make Interfaces Feel Betterjakub.kr
- Train Your Judgementemilkowal.ski
- Good vs Great Animationsemilkowal.ski
- Transitionsanimations.dev
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- Invisible Details of Interaction Designrauno.me