If you're building animation systems or working with motion over time, this reframes the 12 principles of animation through musical concepts like tempo, beats, and dynamics. It's most useful when you need to pace action sequences, choreograph movement, or fix timing that feels rushed or dragging. The mental model is surprisingly practical: map your key story moments as downbeats, determine measures between them, then add or remove rests until the rhythm feels right. The musical terminology (accelerando, staccato, fermata) gives you a precise vocabulary for timing decisions that are usually just gut feel.

skills.sh installs
663
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill rhythm-pacing --agent claude-code

Installs into .claude/skills of the current project.

Files

Rhythm & Pacing

Think like a composer scoring with motion. Animation is visual music. Beats, measures, crescendos, rests—all translate to movement and stillness across time.

Core Mental Model

Before animating any sequence, ask: What's the tempo, and where are the beats?

Every good scene has rhythm. Fast-fast-slow. Action-rest-action. The pattern creates expectation; breaking the pattern creates surprise. Master the beat.

The 12 Principles Through Music

Timing — Tempo control. Frames per action define speed. Consistent timing creates rhythm. Varied timing creates interest. Know when to be metronome-steady and when to rubato.

Slow In & Slow Out — The space between notes. Easing is like vibrato—it shapes the attack and release of each movement-note. Hard stops are staccato. Soft settles are legato.

Anticipation — The upbeat before the downbeat. Music notation shows anticipation as the breath mark. The pause that creates emphasis on what follows.

Follow Through & Overlapping Action — Counterpoint. Multiple elements moving at different rhythms create harmonic complexity. The main action is melody; follow-through is accompaniment.

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1dylantarre avatarcreative-directordylantarre/animation-principlesUse when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.631skills.sh installs
2dylantarre avatarphysics-intuitiondylantarre/animation-principlesUse when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and m624skills.sh installs
3dylantarre avatartiming-masterydylantarre/animation-principlesUse when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement 620skills.sh installs
4dylantarre avatarbrand-marketingdylantarre/animation-principlesUse when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.594skills.sh installs
5dylantarre avatarsolid-drawing-masterydylantarre/animation-principlesUse when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.593skills.sh installs
6dylantarre avatarattention-directiondylantarre/animation-principlesUse when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy a586skills.sh installs