
Squash Stretch Mastery
This teaches you the actual theory behind squash and stretch animation, not just the surface mechanics. You get volume preservation rules, the elasticity spectrum for different materials, and specific percentages to start with (10% for energetic motion, 2-3% for subtle work). What I like is it connects the principle to real implementation across UI buttons, character rigs, and game feel, with concrete numbers like 95-98% height for button presses. The interaction with timing and follow-through is well explained. It's focused on making you understand why the deformation amounts matter for different contexts rather than just giving you easing curves.
- skills.sh installs
- 583
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill squash-stretch-mastery --agent claude-codeInstalls into .claude/skills of the current project.
Files
Squash & Stretch Mastery
The Foundation Principle
Squash and stretch is considered the most important of Disney's 12 principles because it solves animation's fundamental problem: making rigid objects feel alive. Developed in the 1930s at Disney, it emerged from observing how real flesh and rubber deform under force while maintaining constant volume.
Core Theory
Volume Preservation: When an object squashes, it must widen. When it stretches, it must narrow. This constraint creates believability—violate it and objects appear to grow or shrink rather than deform.
Force Visualization: Squash and stretch makes invisible forces visible. A ball squashing on impact shows us the floor's resistance. A character stretching mid-leap reveals velocity and momentum.
The Elasticity Spectrum
Not all objects deform equally:
- High elasticity: Rubber balls, cartoon characters, jelly (extreme deformation)
- Medium elasticity: Human faces, cloth, muscle (subtle deformation)
- Low elasticity: Wood, metal, bone (minimal but present micro-deformation)
Even "rigid" objects benefit from 1-2% deformation—it prevents the dead, mechanical feel.
Sponsors
Details
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Marketing & SEO, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562