Agent-Skills.md

Agent Skills: Timing Calibration

Use when animation speed feels wrong—too fast, too slow, or inconsistent

UncategorizedID: dylantarre/animation-principles/timing-calibration

Repository

dylantarre/animation-principles
dylantarreLicense: MIT
52

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/timing-calibration

Skill Files

Browse the full folder contents for timing-calibration.

Download Skill

Loading file tree…

skills/12-by-problem-type/timing-calibration/SKILL.md

Skill Metadata

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

  1. Start with 200ms - Adjust from there
  2. Larger elements = longer duration - Size affects perceived speed
  3. Distance affects timing - Longer travel = longer duration
  4. Create a timing scale - Use 3-4 consistent values
  5. 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); }