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

timing-calibration