apple-design

Always animate from the element's current on-screen presentation value rather than the target value, and never lock input during transitions. Use spring animations instead of CSS transitions or keyframes, since springs re-target from the current value and velocity by default.

Track the pointer with Pointer Events and setPointerCapture, record recent move events for velocity, then project the resting position using the exponential decay formula (v/1000)*d/(1-d) with d around 0.998. Snap to the nearest target and pass the release velocity into the spring.

Apple's damping ratio and response map to Motion's bounce and duration API. Use a critically damped spring (bounce 0, duration around 0.4) as the default, and add slight bounce (around 0.2) only for momentum-driven interactions like flicks.

Use springs for anything a user can touch or interrupt, because CSS transitions and keyframes cannot be smoothly grabbed and reversed mid-flight. Reserve CSS transitions for simple state changes like hover feedback that are not gesture-driven.

Replace slides, springs, and parallax with short opacity cross-fades when prefers-reduced-motion is set, and drop elastic overshoot. Also respond to prefers-reduced-transparency by making translucent surfaces more solid, and prefers-contrast by adding defined borders.