dylantarre avatar

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

Installs 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
1mvanhorn avatarpp-scrape-creatorsmvanhorn/printing-press-libraryEvery Scrape Creators endpoint across 28 platforms, with credit-aware comment mining and a local corpus no other Scrape Creators tool has. Trigger phrases: `fin571skills.sh installs
2adobe avatarstardustadobe/skillsGuided multi-page redesign of an existing website through a four-phase pipeline — extract (crawl and capture the current site), direct (set a visual direction),569skills.sh installs
3ncklrs avatarwebsite-copy-specialistncklrs/startup-os-skillsExpert website copywriting for SaaS and B2B companies. Use when writing homepage copy, feature pages, about pages, pricing pages, comparison pages, product tour568skills.sh installs
4openclaudia avatarsearch-consoleopenclaudia/openclaudia-skillsPull Google Search Console data and perform search performance analysis. Use when asked about search rankings, clicks, impressions, CTR, index coverage, Core We530skills.sh installs
5brianrwagner avatarreddit-insightsbrianrwagner/ai-marketing-claude-code-skillsSearch and analyze Reddit content using semantic AI search via reddit-insights.com MCP server. Use when you need to: (1) Find user pain points and frustrations 521skills.sh installs
6jezweb avatarfirecrawl-scraperjezweb/claude-skillsConvert websites into LLM-ready data with Firecrawl API. Features: scrape, crawl, map, search, extract, agent (autonomous), batch operations, and change trackin518skills.sh installs