Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
dylantarre avatar

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-mastery

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs326
repo stars68
Last updatedDecember 30, 2025
Repositorydylantarre/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

SKILL.mdMarkdownGitHub ↗

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.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.