craft-motion

Use the stagger table: 50-80ms per-item delay for cards with a total budget under 400ms, all siblings sharing one easing token. Stagger only the first 6-8 items of long lists and land the rest together, triggering once via IntersectionObserver or Framer Motion viewport settings.

CSS transitions are the default choice with zero dependencies. Choose GSAP for timeline sequencing across many elements, and Framer Motion inside React when mount and unmount drive the motion. All three consume the same motion-tokens file for curves and durations.

Springs are allowed only on genuine direct-manipulation surfaces such as drag, bottom sheets, swipe-to-dismiss, and voice barge-in, where motion must inherit the user's velocity. In the presentation register for content entrances and state feedback, springs and overshoot are banned.

Jank usually comes from animating layout properties like width, height, margin, or box-shadow instead of transform and opacity. Robotic feel comes from ease-in or linear easing on spatial movement; use a strong custom ease-out curve and keep frequent interactions in the sub-300ms quick tier.

Design the reduced-motion equivalent during planning, not after: convert spatial movement to opacity-only fades at roughly half duration, replace loops with static states, and keep focus indicators fully visible. Implement it as a first-class path via media queries, gsap.matchMedia, or useReducedMotion.

It does not decide whether a motion idea should exist, render verdicts on finished motion, or measure fps and bundle impact mechanically; those belong to design-taste, craft-critique, and verify-ui-quality respectively. Chart animation is handled by visualize-data.