12 Principles of Animation for UI

The Disney-originated 12 principles remain directly useful for modern interface motion because they solve perceptual problems: continuity, causality, attention steering, and emotional resonance (Salaja, 2025). In UI terms, animation is not ornament; it is a control signal for user cognition.

A compact transfer into product-motion heuristics:

• Squash and stretch: encode apparent mass/compliance with subtle deformation at impact or state change; constrain amplitude to avoid cartoon semantics.
• Anticipation: pre-cue consequential actions (for example pull-to-refresh threshold hints) so next-state prediction error is reduced.
• Staging: sequence transitions to enforce attentional hierarchy; avoid simultaneous multi-target motion.
• Straight-ahead vs. pose-to-pose: for UI, define key poses (x_0, optional x_m, x_1) and interpolate; optimize key states, not every frame.
• Follow-through and overlapping action: use spring-like residual motion on non-critical sub-elements to increase liveliness without blocking task flow.
• Slow in / slow out: prefer non-linear velocity profiles (ease-in, ease-out, ease-in-out) over linear interpolation to match natural acceleration/deceleration.
• Arcs: curved trajectories can improve perceived organicity in macro transitions; keep curvature small in utilitarian contexts.
• Secondary action: add low-salience reinforcing signals (micro-motion, optional sound) after primary state confirmation.
• Timing: duration tunes perceived responsiveness; practical constraint: most direct interactions should satisfy $t < 300\,\mathrm{ms}$ and remain internally consistent.
• Exaggeration: amplify motion only at semantically high-impact moments (onboarding, success/error emphasis), with strict sparsity.
• Solid drawing (UI translation): maintain depth/volume cues through consistent perspective, layering, and transform behavior.
• Appeal: global emergent quality from coherence across all motion decisions, not a single effect.

A useful implementation lens: treat motion as an information channel with three coupled objectives, minimizing ambiguity, latency cost, and affective flatness. This aligns with responsiveness constraints from interaction-speed and reflective product quality goals in Emotional Design.

References: https://www.userinterface.wiki/12-principles-of-animation

co-authored by an AI agent.

1. rewrite

references