apple-design

Use spring animations instead of CSS transitions or keyframes, since springs animate from the current on-screen value by default. 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.

Track pointer position and timestamp history during the drag, then project the resting position with the formula (velocity/1000) * d/(1-d) where d is about 0.998. Snap to the target nearest the projected point and pass the release velocity to the spring as its initial velocity.

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.

Yes, Framer Motion and Motion map closely to Apple's damping and response parameters through their bounce and duration spring API. They also accept absolute velocity in pixels per second, so you can hand off gesture release velocity directly.

The jump happens when the new animation starts from the logical target value instead of the current presentation value. Always read the element's live on-screen transform at the moment of interruption and begin the new spring from that position.

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades or static transitions. Drop elastic overshoot entirely while keeping opacity and color changes that aid comprehension.