This transforms Disney's 12 principles of animation into a physics checklist you can actually use when motion feels off. When your animations look floaty, it tells you to add ease-in and settling oscillations. When they feel stiff, it suggests squash-and-stretch and offset timing. The core insight is solid: audiences don't analyze physics, they feel it, so your goal is believability over accuracy. The mental model of asking "what does this weigh?" before animating anything is genuinely useful. It's written for animators but the principles translate to any UI motion work where you want things to feel grounded instead of sliding around like they're on ice.

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

Install

$ npx -y skills add dylantarre/animation-principles --skill physics-intuition --agent claude-code

Installs into .claude/skills of the current project.

Files

Physics Intuition

Think like a physicist watching the world move. Every object has mass. Every motion has cause and consequence.

Core Mental Model

Before animating anything, ask: What does this weigh?

A feather and a bowling ball both fall, but they tell completely different stories. Your job is to make the audience feel that weight without thinking about it.

The 12 Principles Through Physics

Squash & Stretch — Mass is conserved. When something compresses, it must bulge. A bouncing ball flattens on impact because its volume has to go somewhere.

Timing — Heavy = slow to start, slow to stop. Light = quick reactions. A truck and a bicycle brake very differently.

Slow In & Slow Out — Nothing starts or stops instantly. Acceleration and deceleration are the fingerprints of mass.

Arcs — Gravity curves everything. Even a punch follows a pendulum path from the shoulder. Straight lines feel robotic.

Secondary Action — When the main mass moves, attached masses follow with delay. Hair, clothing, jowls—they're all passengers on the physics train.

Sponsors

Details

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

More from dylantarre/animation-principles

All 144
1dylantarre 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
2dylantarre avatarbrand-marketingdylantarre/animation-principlesUse when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.594skills.sh installs
3dylantarre 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
4dylantarre 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
5dylantarre avataricons-badgesdylantarre/animation-principlesUse when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback581skills.sh installs
6dylantarre avatararc-masterydylantarre/animation-principlesUse when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.578skills.sh installs