apple-design

Use spring animations instead of CSS transitions or keyframes, and always start new animations from the element's live on-screen (presentation) value rather than its target value. Spring libraries like Motion or Framer Motion carry velocity through re-targeting, so users can grab and reverse motion mid-flight.

Track the pointer 1:1 using Pointer Events with setPointerCapture, record recent move events to compute release velocity, then project the resting position with the exponential decay formula (v/1000)*d/(1-d) and snap to the nearest target. Hand the release velocity to a spring so the drag-to-animation transition has no visible seam.

Apple uses damping ratio and response instead of mass/stiffness/damping. Default to damping 1.0 (critically damped, no overshoot) with response 0.3-0.4 seconds; use damping around 0.8 only for momentum-driven interactions like flicks. In Framer Motion, bounce and duration map closely to these values.

Use spring libraries for anything gesture-driven, because CSS transitions and keyframes cannot be smoothly grabbed and reversed mid-flight. Springs animate from the current value by default and blend velocity on re-targeting, which is exactly what interruption requires.

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

Use backdrop-filter with blur and saturate plus a semi-transparent background color, letting content scroll underneath the layer. Match material weight to hierarchy, avoid stacking light translucent surfaces, and animate blur radius with scale on enter and exit so the surface reads as a real material.