
Timing Mastery
- 326 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
Calibrate delays, staggers, durations, and easing curves so multi-step UI sequences feel intentional, readable, and coordinated across breakpoints.
About
Teaches mastery of animation timing: how delays, staggers, durations, and easing curves work together to guide attention and communicate hierarchy. Provides practical rules for making multi-step UI motion feel coordinated rather than chaotic.
- Duration and delay hierarchy across flows
- Stagger patterns for lists and groups
- Easing selection for natural acceleration
- Coordinating enter-exit sequences
- Breakpoint-aware timing adjustments
Timing Mastery by the numbers
- 326 all-time installs (skills.sh)
- Ranked #760 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill timing-masteryAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 326 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
What it does
Calibrate delays, staggers, durations, and easing curves so multi-step UI sequences feel intentional, readable, and coordinated across breakpoints.
Files
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.
Secondary Action — Time secondary elements to complement, not compete. They should land slightly after the primary beat, like harmony following melody.
Staging — Give the audience time to read. Fast cutting confuses. Hold important poses long enough for comprehension. Clarity requires duration.
Exaggeration — Timing amplifies exaggeration. A long anticipation followed by instant action creates snap. Stretch time to stretch impact.
Squash & Stretch — Speed determines deformation. Fast motion = more stretch. Impact = instant squash. The timing of shape change sells velocity.
Arcs — Speed varies along the arc. Fastest at the bottom of a swing, slowest at the apex. Timing follows the physics of pendulums.
Appeal — Rhythmic motion is appealing. Characters with good timing feel alive. Arrhythmic timing creates unease (useful for villains or horror).
Straight Ahead & Pose to Pose — Time your key poses first (pose to pose), then decide how many frames connect them. Or discover timing organically (straight ahead) and refine.
Solid Drawing — Volume must read at speed. Fast-moving objects need exaggerated stretch or motion blur. Solid drawing at the wrong timing looks frozen.
Practical Application
When action feels "rushed": 1. Add more frames to anticipation 2. Hold key poses 2-4 frames longer 3. Slow the ease-out to let actions settle 4. Insert "moving holds" instead of dead stops
When action feels "sluggish": 1. Reduce in-between frames 2. Cut anticipation duration 3. Increase contrast between fast and slow sections 4. Remove frames from less important movements
Timing Chart:
- Blink: 2-4 frames
- Quick gesture: 6-8 frames
- Walk cycle: 12-16 frames per step
- Emotional reaction: 8-12 frames + hold
- Heavy impact: 2 frames contact, 12+ frames settle
The Golden Rule
Timing is relative. Fast only feels fast next to slow. Build contrast. Let quiet moments make loud moments louder. A pause before a punchline is what makes it land.