Animation Recipe Library

Mental model

Motion is a sentence about causality: this happened because that happened. Animation that does not explain a relationship is decoration, and decoration is the first thing that reads as amateur.

• Duration follows distance and size. A 200px slide is not a 20px nudge. 150-200ms for small state changes, 250-350ms for entrances, 400-500ms for anything crossing the viewport. Over 500ms and the interface feels slow no matter how pretty the curve.
• Ease out for entrances, ease in for exits. Things arriving decelerate; things leaving accelerate away. Linear is for progress bars and nothing else.
• Animate transform and opacity. They are composited. Width, height, top, left and box-shadow are painted, and animating them drops frames on the devices least able to afford it.
• Reduced motion is not optional. WCAG 2.1 SC 2.3.3, and a vestibular trigger for real people. Every recipe here ships a fallback.