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.

Use Apple's projection formula: projected distance equals (velocity/1000) multiplied by decelerationRate divided by (1 minus decelerationRate), with decelerationRate around 0.998. Add this to the current position, snap to the nearest target, then animate with the release velocity.

Start with damping ratio 1.0 (critically damped, no overshoot) and response around 0.3 to 0.4 seconds for most UI. Add bounce with damping near 0.8 only when the gesture carried momentum, such as a flick or drag release.

Yes, combine backdrop-filter blur with a semi-transparent background to approximate Apple's translucent materials, letting content scroll underneath. Avoid stacking light translucent surfaces on each other, and raise background opacity when prefers-reduced-transparency is set.

CSS transitions and keyframes have fixed durations and cannot be smoothly grabbed or reversed mid-flight, creating velocity discontinuities at reversals. Springs respond to new input by simply changing the target, keeping motion continuous and interruptible.

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