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 the target value. Spring libraries like Motion or Framer Motion carry velocity through re-targeting, avoiding visible jumps on reversal.

Track pointer velocity during the drag, then project the resting position with the formula current + (v/1000) * d / (1 - d) where d is about 0.998. Snap to the target nearest that 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 with response 0.3 to 0.4 seconds for no overshoot, and use damping around 0.8 only for momentum-driven interactions like flicks and drawer throws.

CSS transitions and keyframes should be avoided for anything gesture-driven because they cannot be grabbed and reversed mid-flight. They work for simple state changes, but springs are required when a user must be able to interrupt and redirect motion at any moment.

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.

The jump happens when the new animation starts from the logical target value instead of the current on-screen value, or when velocity is hard-cut at the reversal. Read the live transform on interrupt and use a spring that blends velocity through the re-target.