Animation in design

Of Disney's 12 principles, 4 are critical in interfaces: timing (200–500 ms for UI, longer feels sluggish), easing (ease-out on appear, ease-in on disappear, never linear), squash & stretch (micro-elasticity for buttons), anticipation (element 'prepares' for action — grabs attention). The rest is for storytelling and motion pieces.

Micro-interactions: hover, press, toggles (50–200 ms). State transitions: appearing/disappearing elements, accordions (200–300 ms). Navigation transitions: shared-element, hero animations (300–500 ms). Loading: skeletons beat spinners. Decorative: parallax, scroll animations — watch performance and prefers-reduced-motion.

Lottie (JSON) — vector animation from After Effects/Figma, ~50–200 KB, scales — the product standard. Rive — interactive animation with states. GIF — only for messengers (heavy, no transparency, 256 colors). Video (mp4/webm) — for promo clips. CSS/Web Animations — for simple transitions, no files.

Animation should answer 'what happened' in <500 ms. Always check prefers-reduced-motion (enabled in OS for many users). 60 fps or don't bother — janky animation is worse than none. Animate transform and opacity — they're on GPU; width/height/layout trigger reflow. In the design system fix tokens: duration-xs/s/m, standard easing.