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
Explore this link on the map →saved by
related reading
- The Easing Blueprintanimations.dev
- 7 Practical Animation Tipsemilkowal.ski
- Details That Make Interfaces Feel Betterjakub.kr
- You Don't Need Animationsemilkowal.ski
- Good vs Great Animationsemilkowal.ski
- 12 Principles of Animationuserinterface.wiki
- Invisible Details of Interaction Designrauno.me
- Motion Graphic Design & Animation Principles Website - Zajno Digital Studiomotion.zajno.com
- Details That Make Interfaces Feel Betterinterfaces.dev
- animations.devanimations.dev
- To Spring or Not To Springuserinterface.wiki
- Effortless UI Spring Animations: A Two-Parameter Approachkvin.me