Exact spring values, timing charts, and motion principles for briefing any AI agent to produce Apple-feel UI animations — from easing curves to sound design to anti-patterns.
This guide is reviewed for clarity, service accuracy, and AI-search readability. The next quarterly content review is tracked internally before unsupported metrics or client proof are added.
What Makes Apple Motion Feel Different
Apple motion is not decorative — it's confirmation. Every animation tells the user that their action registered and that the system is responding with intent. The motion is the feedback, not a flourish on top of it. If you removed the animation and just cut to the final state, the user should feel like the system is broken. If they don't notice the animation is gone, you're over-animating.
The four feelings every Apple-style animation should evoke: weighted not floaty (elements have mass and settle), confident not eager (calm and decisive, never twitchy), tactile not graphic (surfaces feel real — glass, not flat colour), quiet not loud (sound is felt more than heard).
This document is a brief you can attach to any AI agent prompt to produce UI motion that matches that feel. Every value below is exact.
The 8 Motion Principles
- Spring physics, not linear: movement follows a damped spring curve — elements accelerate from rest, overshoot by 3–8%, and settle. Never use linear or simple ease-in-out for primary motion.
- Scale + opacity simultaneously: when something enters, it grows from 85–92% scale to 100% AS it fades from 0 to 1 opacity. Both animations complete on the same frame.
- Stagger, never parallelise: multiple elements never enter at the exact same moment. Each is offset 60–120ms from the previous.
- Anchor from the bottom or centre: transformations originate from the bottom edge or geometric centre, never the top-left corner.
- Soft shadows scale with motion: as an element rises, its shadow grows and softens. As it lands, the shadow tightens.
- Blur during transitions: fast movement applies 1.5–3px Gaussian blur during the most rapid part — reads as depth of field.
- The bounce is small: maximum overshoot 3–8%. A 15%+ bounce reads as cartoonish.
- Exit faster than entry: 500–700ms to enter, 250–400ms to leave.
Exact Spring Values
| Spring | Stiffness | Damping | Mass | Duration | Use For |
|---|---|---|---|---|---|
| Standard Entry | 180 | 20 | 1 | ~600ms | Cards, widgets, modals |
| Soft Pop | 260 | 22 | 1.1 | ~450ms | Toggles, badges, chips |
| Heavy Settle | 140 | 24 | 1.3 | ~800ms | Full-screen, hero elements |
| Exit | cubic-bezier(0.32, 0, 0.67, 0) | — | — | ~300ms | All exits, no bounce |
Duration Cheat Sheet
| Element | Entry | Exit | Spring |
|---|---|---|---|
| Notification chip | 450ms | 250ms | Soft Pop |
| Widget / card | 600ms | 350ms | Standard Entry |
| Full-screen modal | 800ms | 400ms | Heavy Settle |
| Icon / badge | 500ms | 250ms | Standard Entry |
| Text reveal | 400ms/line | — | Stagger 80ms/line |
| Progress fill | 1200–1800ms | — | Ease-out cubic |
Stagger Timing
| Group Size | Offset | Effect |
|---|---|---|
| 2–3 elements | 100ms | Reads as a group |
| 4–6 elements | 70ms | Grid feel, under 1.2s total |
| 7+ elements | 50ms | Cascade, feels alive |
| Widget panels | 120–150ms | Weighted, deliberate |
Sound Design — The Audio Fingerprint
Sound is 50% of the Apple feel. Every animation has a paired sound.
| Sound | Frequency | Decay | Use For |
|---|---|---|---|
| Soft tactile pop | 800Hz–1.2kHz | 80ms | Element entries |
| Glass tick | 2.5–4kHz | 60ms | Toggles, small confirmations |
| Whoosh | 200Hz–6kHz sweep | 200–350ms | Large entries/exits at -18dB |
| Sub bump | 40–80Hz | 120ms | Hero moments (felt, not heard) |
| Confirmation chime | C5+G5+C6 | 600ms | Success states only |
Layering: hero moments stack sub bump + tactile pop + whoosh within a 40ms window. Standard UI: 1 layer only. Volume: -12dB to -24dB, never louder. Sync: peak at visual settle, not motion start.
How to Brief an AI Agent with This Reference
Attach this document to any agent prompt where the goal is Apple-feel UI motion. The agent should treat every section as binding. Minimal brief structure:
promptApply the Apple-style motion reference attached. Use the [Light/Dark/Hero] visual system. The element is a [type]. The interaction is [trigger → change]. Spring: [specify from table]. Sound: [specify cue or 'silent'].
Frequently Asked Questions
- Can I use CSS transitions instead of spring physics? For small accents, use
cubic-bezier(0.34, 1.56, 0.64, 1)as a Soft Pop approximation. For cards and modals, use a proper spring library (Framer Motion, React Spring) to get accurate settle behavior. - How do I implement stagger in CSS or Framer Motion? In CSS, increment
animation-delayper child element. In Framer Motion, usestaggerChildrenin parent variants. The ms offset values in this reference translate directly to seconds (100ms = 0.1). - What is the single most common mistake in Apple-style animation? Too much bounce. If your animation feels almost right but slightly off, reduce the overshoot first. If anyone describes your animation as 'bouncy,' cut the overshoot in half.