motion-design-principleslisted

<!-- last-verified: 2026-07 --> # Motion design principles The taste layer. `motion-react` and `gsap-scrolltrigger` implement animation in code; this skill decides *whether*, *how long*, and *what curve* — defer to it before reaching for either library. ## 1. Duration bands by function Pick duration from what the motion is *for*, not from a house default: | Function | Duration | Notes | |---|---|---| | Hover / focus feedback | <100ms | Near-instant; any lag reads as unresponsive | | Button press, icon swap | 100–200ms | Small, local, high-frequency | | State transition, modal open/close | 200–400ms | Enough to convey spatial change without stalling | | Anything gating user action | 400–500ms hard ceiling | Past 500ms reads as delay, not motion | Two dials adjust the band, not replace it: - **Scale UP with distance/size travelled** — an element crossing the whole viewport earns more time than one nudging 4px. - **Scale DOWN with exposure frequency** — anything the user sees dozens of times a session (list-item hover, tab switch) stays under ~150ms even if the "state transition" band would allow more. Frequency fatigue outweighs the base band. ## 2. Entrance/exit asymmetry - **Exit ≈ 75% of enter duration.** Leaving should feel quicker than arriving — the user's attention has already moved on. - **Ease-out (decelerate to rest) for entrances**; **ease-in (accelerate away) for exits.** An entrance that's still accelerating when it lands feels like it oversh