dylantarre avatar

Follow Through Overlapping

This teaches Claude how to animate things that don't stop all at once. When a character stops moving, their hair keeps swinging. When you dismiss a modal, background elements should settle after the foreground. The skill breaks down drag hierarchies (root moves first, appendages lag behind based on mass and flexibility), timing offsets (2-4 frames per level at 24fps), and settling curves that ease out with slight overshoot. Covers both UI work like pull-to-refresh elastic snapping and character animation like tail motion lagging behind body movement. The stagger formula and concrete frame counts make it actually implementable rather than just theory.

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

Install

$ npx -y skills add dylantarre/animation-principles --skill follow-through-overlapping --agent claude-code

Installs into .claude/skills of the current project.

Files

Follow Through & Overlapping Action Mastery

The Momentum Principle

Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded.

Core Theory: Two Related Concepts

Follow Through: When the main body stops, appendages continue moving due to momentum, then settle. The termination behavior of motion.

Overlapping Action: Different parts move at different rates throughout motion, not just at stops. Hair doesn't start moving when the head starts—it drags behind, then catches up. The continuous offset of timing.

The Drag Hierarchy

Parts further from the root of motion drag more:

  1. Root (hips, torso): Moves first, stops first
  2. Primary extensions (limbs, head): Slight delay
  3. Secondary extensions (hands, facial features): More delay
  4. Tertiary elements (fingers, hair, cloth): Maximum drag

Each level follows the previous, creating cascading waves of motion.

Physical Properties Affecting Drag

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 avatarslow-in-out-masterydylantarre/animation-principlesUse when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.572skills.sh installs
2dylantarre avatarspatial-thinkingdylantarre/animation-principlesUse when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or mainta572skills.sh installs
3dylantarre avataranticipation-payoffdylantarre/animation-principlesUse when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.568skills.sh installs
4dylantarre avatartiming-principle-masterydylantarre/animation-principlesUse when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.565skills.sh installs
5dylantarre avatarexaggeration-masterydylantarre/animation-principlesUse when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.562skills.sh installs
6motion-team avatarcreative-mechanicsmotion-team/creative-strategy-skillsA library of creative mechanics — the structural patterns that define how an ad constructs meaning between its hook, visuals, and narrative. Use this whenever d560skills.sh installs