playbooks

home / skills / dylantarre / animation-principles / timing-calibration

timing-calibration skill

/skills/12-by-problem-type/timing-calibration

This skill helps you calibrate animation timing to feel natural and consistent across UI, ensuring faster feedback and smoother transitions.

npx playbooks add skill dylantarre/animation-principles --skill timing-calibration

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.8 KB
---
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

```css
: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); }
```

Overview

This skill helps you tune animation speed and rhythm using Disney’s timing principles. It identifies common timing problems—too fast, too slow, inconsistent—and gives concrete duration ranges, easing guidance, and quick fixes to make motion feel natural and readable.

How this skill works

The skill inspects animation durations, easing curves, travel distance, and relative timing between primary and secondary actions. It maps issues to principles like Timing, Slow In/Slow Out, Arcs, and Staging, then recommends duration bands, easing choices, and size-aware adjustments. It also offers a simple timing scale and a troubleshooting checklist you can apply in CSS or animation tooling.

When to use it

  • Animations feel too fast, too slow, or inconsistent across the UI
  • Similar actions use different durations or easings
  • Motion looks robotic or lacks natural acceleration/deceleration
  • Users wait on animations or complain about sluggishness
  • You’re establishing a consistent motion system or design tokens

Best practices

  • Start with a 200–250ms baseline for standard transitions and adjust from there
  • Use easing: ease-out for entrances, ease-in for exits, avoid linear for organic motion
  • Scale duration with size and distance—larger elements and arcs need more time
  • Keep most UI animations under 400ms; reserve 400–600ms for deliberate reveals
  • Create 3–4 consistent timing tokens (instant, fast, normal, deliberate) and reuse them

Example use cases

  • Calibrating button press and toggle feedback to 100–150ms for snappy micro-interactions
  • Adjusting modal and card transitions to 200–300ms with ease-out for entrance
  • Slowing secondary animations slightly relative to the primary action for natural hierarchy
  • Extending duration for curved motion paths so arcs don’t feel rushed
  • Testing a timing scale by speeding animations 30% and slowing 30% to validate readability

FAQ

What duration should I use for small UI feedback?

Use 100–150ms for micro-interactions like hover or press feedback.

When should I exceed 400ms?

Only for complex reveals or onboarding steps where deliberate attention is needed; keep most interactions under 400ms.