universal-timing

Universal Timing Principles

Some animation truths transcend duration. These principles work at 50ms and 5000ms. Master these to make good timing decisions at any scale.

Disney Principles - Universal Application

Always True

Squash & Stretch: Scale proportionally - 5% at 100ms, 30% at 2000ms. Never eliminate, always proportional.

Anticipation: Ratio stays constant - anticipation is 20-30% of main action duration, regardless of total time.

Staging: One clear focus - whether instant or cinematic, only one thing should demand primary attention.

Straight Ahead/Pose to Pose: Complexity matches duration - short = straight ahead, long = pose to pose.

Follow Through: Present at all durations - even 100ms can have micro-overshoot. Scale matches duration.

Slow In/Slow Out: Always ease - linear motion looks mechanical at every duration.

Arcs: Natural paths scale - short animations = subtle curves, long animations = sweeping arcs.

Secondary Action: Supports, never competes - true at 50ms and 5000ms.

Timing: Duration determines perception - same motion reads differently at different speeds.

Exaggeration: Match duration and importance - longer duration allows more exaggeration.

Solid Drawing: Transforms must match - consistency matters regardless of speed.

Appeal: The goal - animation should enhance, not impede, at any duration.

Universal Ratios

The Golden Ratio of Animation Timing

Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms

Stagger Ratio

Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items

Easing Intensity vs Duration

Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible

Easing That Works Everywhere

/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);