timing-mastery
Timing Mastery
Think like a drummer. Animation is rhythm made visible. The space between beats matters as much as the beats themselves.
Core Mental Model
Before animating anything, ask: How many frames does this deserve?
Timing is the soul of animation. The same motion at different speeds tells completely different stories. Fast = light, urgent, comedic. Slow = heavy, dramatic, thoughtful.
The 12 Principles Through Timing
Timing — The principle itself. Count frames obsessively. A 6-frame action feels snappy. A 24-frame action feels deliberate. Know the vocabulary of duration.
Slow In & Slow Out — Time is elastic at the edges. Actions ease into existence and settle out of motion. The middles can be fast, but beginnings and endings need breath.
Anticipation — Timing creates suspense. Hold the anticipation longer than feels comfortable. The audience's tension builds in the pause before release.
Follow Through & Overlapping Action — Stagger your timing. Not everything arrives at once. Lead with the main action, let secondary elements catch up on their own schedules.
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