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);

Universal Laws

Shorter distances = shorter durations - motion should feel proportional to space.
Bigger elements move slower - perceived weight requires more time.
Enter fast, exit faster - users care about what's arriving, not leaving.
Context determines tolerance - first visit allows longer animation than repeat use.
Attention is finite - compete for it wisely, regardless of duration.
Physics provides intuition - match real-world expectations at any speed.
Easing is mandatory - linear motion looks wrong at every duration.
Test at extremes - if it works at 2x and 0.5x, it's robust.

Duration Selection Framework

What should the user feel?
├── Instant (< 100ms)
│   └── Confirmation, responsiveness
├── Quick (100-300ms)
│   └── Efficiency, polish
├── Standard (300-500ms)
│   └── Clarity, communication
├── Deliberate (500-1000ms)
│   └── Importance, attention
└── Dramatic (> 1000ms)
    └── Story, emotion, memory

Key Insight

Duration is a design decision. It communicates importance, guides attention, and shapes emotion. The Disney principles are tools - timing is how you wield them. Master the principles, then let context determine duration.

universal-timing