Timing Calibration

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

Slow In and Slow Out

Arcs

Staging

Secondary Action

Timing Scale

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