Motion & Animation

Motion exists to explain (where did this come from?), confirm (did that work?), and occasionally delight. If an animation does none of those, delete it. The details compound — wrong easing or a scale(0) pop is the difference between "premium" and "cheap."

Full depth is in the SaglitzDesign MCP (npx saglitzdesign-mcp): docs animation-craft, motion-microinteractions, wwdc-design-principles; tools generate_motion (easing/duration tokens + ready keyframes in CSS, Framer Motion or SwiftUI, reduced-motion included) and compare_design_languages("motion") for per-platform physics.

Easing — the rule agents get wrong

• Enter: ease-out (fast start, gentle landing). Elements arriving decelerate.
• Exit: ease-in, and faster than the enter (~2/3 the duration). Dismiss quickly.
• Move / reposition: ease-in-out.
• Never linear for UI — only for spinners and continuous progress.

Using ease-in for an enter (or ease everywhere by default) makes motion feel broken even if users can't say why.

Durations