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.

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 interpolate — is the CSS/JS approach. Define clear initial and final states; let transition or a spring physics library handle the in-between.

5. Follow-Through and Overlapping Action

Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }