Timing Calibration

Get animation speed right using Disney's timing principles.

Problem Indicators

• "Too slow" or "too fast" feedback

• Animations feel inconsistent

• Similar actions have different speeds

• Users wait for animations

• Motion feels robotic or unnatural

Diagnosis by Principle

Timing

Issue: Duration doesn't match action type Fix: Micro-interactions: 100-150ms. Transitions: 200-400ms. Complex reveals: 400-600ms. Never exceed 1s for UI.

Slow In and Slow Out

Issue: Linear timing feels mechanical Fix: Use easing. Ease-out for entrances (fast start, soft landing). Ease-in for exits (soft start, quick finish).

Arcs

Issue: Straight-line motion at wrong speed Fix: Curved paths need more time than straight paths. Increase duration for arc motion.

Staging

Issue: Multiple speeds compete Fix: Similar elements should animate at similar speeds. Create timing harmony.

Secondary Action

Issue: Secondary animations at wrong relative speed Fix: Secondary actions should be slightly slower than primary. Creates natural hierarchy.

Timing Scale

Category Duration Use For

Instant 0-100ms Hover states, micro-feedback

Fast 100-200ms Buttons, toggles, small elements

Normal 200-300ms Cards, modals, most transitions

Slow 300-400ms Page transitions, large elements

Deliberate 400-600ms Complex reveals, onboarding

Quick Fixes

• Start with 200ms - Adjust from there

• Larger elements = longer duration - Size affects perceived speed

• Distance affects timing - Longer travel = longer duration

• Create a timing scale - Use 3-4 consistent values

• Test at 2x speed - If too slow works, use it

Troubleshooting Checklist

• Is duration under 400ms for most UI?

• Do similar elements have similar timing?

• Is easing applied (not linear)?

• Does larger movement have longer duration?

• Test: Speed up by 30%—still readable?

• Test: Slow down by 30%—feels sluggish?

• Are users waiting for animations?

• Compare to platform conventions (iOS/Android/Web)

Code Pattern

:root { /* Timing scale */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 350ms; --duration-deliberate: 500ms;

/* Easing */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); }

/* Size-aware timing */ .small-element { transition-duration: var(--duration-fast); } .medium-element { transition-duration: var(--duration-normal); } .large-element { transition-duration: var(--duration-slow); }