motion-and-storytelling

# 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. ```css button:active { transform: scale(0.96); } button { transition: transform 80ms ease-out; } ``` Use sparingly — reserved for primary CTAs and satisfying confirmations. ### 2. Anticipation A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming. ### 3. Staging Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging. ### 4. Straight Ahead vs Pose to Pose **Pose to pose** — defining start and end states and letting the system interpolat...