apple-design

Use spring animations instead of CSS transitions or keyframes, and always animate from the element's current on-screen presentation value rather than the 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 with Pointer Events and setPointerCapture, record a short velocity history, then on release project the resting position with the formula (v/1000)*d/(1-d) using decelerationRate around 0.998. Snap to the nearest target and hand the release velocity to a spring.

Apple uses damping ratio and response instead of mass, stiffness, and damping. Start most UI at damping 1.0 (critically damped, no overshoot) with response 0.3-0.4 seconds, and only add bounce around damping 0.8 when the gesture itself carried momentum like a flick.

CSS transitions and keyframes should be avoided for anything gesture-driven because they cannot be smoothly grabbed and reversed mid-flight. They work for simple state changes, but springs are required when users can interrupt or redirect the motion.

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

The jump happens when the new animation starts from the logical target value instead of the live presentation value on screen. Read the element's current rendered transform at the moment of interruption and start the new spring from there, blending velocity rather than hard-cutting it.