apple-design

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

Track the pointer 1:1 using Pointer Events with setPointerCapture, record a short velocity history, then on release project the resting position with Apple's momentum formula and hand the release velocity to a spring. Snap to the target nearest the projected point rather than the release point.

Apple uses damping ratio 1.0 (critically damped, no overshoot) with response around 0.3-0.4 seconds for most UI, and damping near 0.8 only for momentum-driven interactions like flicks and drawers. In Motion or Framer Motion this maps to bounce 0 by default and bounce around 0.2 for physical gestures.

Use springs for anything gesture-driven, because CSS transitions and keyframes cannot be smoothly grabbed and reversed mid-flight. Springs animate from the current value and inherit velocity, which is exactly what interruption and reversal require.

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

Apply progressive resistance past the boundary instead of a hard stop, using the formula (overshoot * dimension * 0.55) / (dimension + 0.55 * |overshoot|). The further past the edge the user drags, the less the element follows, which reads as responsive rather than frozen.