What is universal-timing?

This Claude skill serves as a definitive guide for mastering universal animation timing principles, bridging the gap between classical Disney animation rules and modern UI/UX design. It provides actionable frameworks, CSS easing snippets, and duration selection logic to ensure motion feels natural, professional, and purposeful across any digital interface or creative project.

When should I use universal-timing?

universal-timing is useful in the following scenarios: • UI/UX Design: Implementing the 'Golden Ratio of Animation' (20:50:30) to balance anticipation, action, and follow-through in interface transitions. • Motion Design Systems: Establishing standardized easing functions and duration laws (e.g., 'Bigger elements move slower') to maintain brand consistency across platforms. • Front-end Development: Utilizing optimized CSS cubic-bezier curves for high-performance, natural-feeling web animations that scale with duration. • Creative Education: Learning how to apply foundational principles like Squash & Stretch and Arcs proportionally to different time scales (50ms to 5000ms). • Product Polish: Refining micro-interactions by applying the 'Enter fast, exit faster' rule to improve perceived app responsiveness.

name	universal-timing
description	Use when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges

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

When & Why to Use This Skill

Use Cases