Motion and Storytelling in UI

Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.

The key word is subtlety. In UI, motion should be felt, not watched.

Disney's 12 Principles Applied to UI

1. Squash and Stretch

Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.

button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }

Use sparingly — reserved for primary CTAs and satisfying confirmations.