timing-calibration
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
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
624motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
558micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
441saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287