What is timing-calibration?

The Timing Calibration skill optimizes user interface animations by applying professional motion principles derived from Disney's animation standards. It helps developers and designers diagnose and fix inconsistent, robotic, or poorly timed transitions, ensuring a fluid and natural user experience through standardized duration scales and CSS easing patterns.

When should I use timing-calibration?

timing-calibration is useful in the following scenarios: • Refining UI transitions that feel 'too fast' or 'too slow' to enhance user comfort and perceived application performance. • Standardizing animation durations across complex web applications using a consistent 100ms-600ms timing scale to ensure visual harmony. • Replacing linear, mechanical movements with natural easing functions (Ease-in/Ease-out) to create a more polished and professional feel. • Calibrating motion speed dynamically based on element size and travel distance to maintain a realistic sense of physics in the UI. • Troubleshooting 'robotic' animations by implementing secondary actions and arc-based motion paths.

name	timing-calibration
description	Use when animation speed feels wrong—too fast, too slow, or inconsistent

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

timing-calibration

When & Why to Use This Skill

Use Cases