Motion as Emotion
The way animation speed, easing, and amplitude map directly to perceived brand personality — motion is a tone-of-voice decision, not a technical one.
Plain English
Fast and snappy: powerful, direct, no-nonsense. Slow and floaty: calm, premium, contemplative. Bouncy and elastic: playful, friendly, approachable. Stiff and linear: mechanical, precise, cold. Every animation decision carries emotional weight whether you intend it to or not. A fintech app that uses elastic springy animations signals immaturity to its target audience. A children's educational app that uses crisp instant transitions feels clinical and unfriendly. Motion is as much a brand language as typography and colour — and unlike those, it is often chosen accidentally by developers picking default easings. The designer's job is to choose motion that matches what the product needs to feel like.
Research background
Easing vocabulary: ease-in (starts slow, ends fast — use for exits, things leaving the screen), ease-out (starts fast, decelerates — use for entrances, things arriving), ease-in-out (both — use for position changes that stay on screen), linear (mechanical, unnatural — avoid for UI except progress bars and spinners), spring/overshoot (cubic-bezier with values > 1 — use for playful interactive feedback). Duration vocabulary: 80–120ms feels instant/snappy, 200–300ms feels natural/considered, 400–600ms feels deliberate/premium, > 600ms feels slow unless it is a dramatic reveal. Amplitude vocabulary: small (scale 0.97–1.03) feels subtle/professional, large (scale 0.9–1.1 or large translate) feels expressive/playful.
UI examples
✓ Applying the principle
Apple's iOS: animations are longer than competitors (350–500ms), use ease-out heavily, and have low amplitude — communicating 'polished, premium, unhurried'. Duolingo: shorter animations (150–250ms), elastic easing, high amplitude — communicating 'fun, energetic, encouraging'.
✗ Violating it
A healthcare app using bouncy elastic spring animations throughout — the playful motion undermines trust in a context where users need to feel the product takes their health seriously.
AI Prompt
Paste into Claude, Cursor, Bolt, or v0.
Define a motion personality for this product: (1) Choose a duration range (e.g. 150–250ms for energetic, 300–450ms for considered). (2) Choose a primary easing (ease-out for most transitions, spring for interactive feedback). (3) Choose amplitude (scale ±2% for subtle/pro, ±5% for expressive). Apply these consistently: entrance animations use ease-out, exits use ease-in, interactive feedback uses spring. Document these as --motion-duration, --motion-easing, and --motion-spring CSS custom properties.