apple-design

Use spring animations instead of CSS transitions or keyframes, since springs animate from the current on-screen value and can be re-targeted mid-flight. On interrupt, read the element's live transform and start the new animation from there, carrying velocity through the re-target to avoid a visible jump.

Project the resting position with the formula (velocity/1000) * decelerationRate / (1 - decelerationRate), using a deceleration rate around 0.998. Add the projection to the current position, snap to the nearest target, then animate there with the release velocity as the spring's initial velocity.

Start with a damping ratio of 1.0 (critically damped, no overshoot) and a response of 0.3-0.4 seconds for most UI. Use damping around 0.8 only for momentum-driven interactions like flicks, where slight overshoot matches the gesture's physicality.

CSS transitions and keyframes should be avoided for gesture-driven UI because they cannot be grabbed and reversed mid-flight. Use a spring library like Motion or Framer Motion that animates from the current value and blends velocity on re-targeting.

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades. Also handle prefers-reduced-transparency by making translucent surfaces solid, and prefers-contrast by adding defined borders.

The element must track the pointer 1:1 while respecting the offset where the user grabbed it, not snapping to the element's center. Use Pointer Events with setPointerCapture so tracking continues outside the element's bounds, and record recent move events to compute release velocity.