apple-design

Always animate from the element's current on-screen presentation value, never 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 Apple's exponential decay formula 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 duration. Default to damping 1.0 (no overshoot) with response 0.3-0.4 seconds; use damping around 0.8 only for momentum-driven interactions like flicks. Motion's bounce and duration spring API maps closely to these values.

CSS transitions and keyframes are pre-scripted with fixed durations, so they cannot be grabbed and reversed mid-flight without a visible jump or velocity discontinuity. Springs animate from the current value and carry velocity through re-targeting, which is what interruption requires.

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades or static transitions. 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, 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.