Apple Design — Motion (animation · gestures · feedback)

How Apple makes interfaces feel alive: spring-driven, interruptible, responsive.

When to use

• Adding any transition, animation, gesture, or press/loading feedback.
• Making web motion feel "Apple-fluid" rather than canned-easing.

Core rules

• Springs over fixed easing. Apple animates with springs (mass/stiffness/damping), parameterized as response + dampingFraction (or duration + bounce). On web, generate a CSS linear() curve from spring params — don't default to ease.
• Interruptible + velocity handoff. Respond on pointerdown, let a gesture's release velocity feed the spring, and allow mid-flight redirection. Never block input behind an animation.
• Animate transform/opacity only (GPU-composited); use will-change sparingly. Don't animate layout properties.
• Every action gets feedback — visual press state (scale/dim) always; haptics where available. Web Vibration API does not work in iOS Safari — never rely on it for tactile feel.
• Honor prefers-reduced-motion: provide a fade/instant alternative, not the big move.
• Bind to continuous scroll progress on flagship pages. On flagship/marketing pages, bind motion to CONTINUOUS scroll progress (damped — smooth the read, never hijack scroll), not just in-view reveals. Reversible, multi-rate scroll-progress motion is the single biggest differentiator between a dead template and an alive Apple page.