playbooks

home / skills / dylantarre / animation-principles / squash-stretch-mastery

squash-stretch-mastery skill

/skills/11-by-principle-focus/squash-stretch-mastery

This skill helps you implement squash and stretch in animations to convey weight and elasticity across UI, characters, and logos.

npx playbooks add skill dylantarre/animation-principles --skill squash-stretch-mastery

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.0 KB
---
name: squash-stretch-mastery
description: Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.
---

# 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.

## Interaction with Other Principles

**Timing amplifies squash/stretch**: Fast impacts demand more squash; slow floats need gentle stretch. The deformation amount must match velocity.

**Anticipation uses stretch**: A character winding up for a jump often stretches slightly before the motion begins.

**Follow-through extends it**: After landing, the squash ripples through secondary elements (hair, clothing, flesh).

## Domain Applications

### UI/Motion Design
- Button press: subtle squash (95-98% height) on tap
- List items: stretch slightly when pulled beyond bounds (rubber-band scroll)
- Notifications: squash on arrival, bounce to rest

### Character Animation
- Facial expressions: cheeks squash on smile, stretch on surprise
- Walk cycles: torso compresses on contact, extends on passing
- Emotional beats: extreme stretch for shock, squash for dejection

### Logo Animation
- Bouncing logos: exaggerated squash creates playful personality
- Subtle breathing: micro-squash/stretch keeps static logos alive

### Game Feel
- Jump arcs: stretch on ascent, squash on landing
- Hit reactions: brief squash sells impact before knockback
- Collectibles: rhythmic pulse using gentle squash/stretch

## Common Mistakes

1. **Breaking volume**: Objects appear to grow/shrink instead of deform
2. **Uniform deformation**: Real objects deform more where force is applied
3. **Over-application**: Subtle contexts need 1-5%, not cartoon 50%
4. **Static extremes**: Deformation should ease in/out, never snap

## Implementation Heuristic

Start with 10% deformation for energetic motions, 2-3% for subtle polish. Adjust based on material and tone. When in doubt, less is more—squash/stretch should be felt, not consciously noticed.

Overview

This skill teaches practical application of the squash and stretch principle to make motion feel elastic, weighted, and alive. It condenses core theory, elasticity ranges, domain-specific examples, and a simple implementation heuristic for designers and animators. Use it to improve readability, impact, and emotional expression in motion.

How this skill works

The skill inspects motion scenarios and recommends deformation amounts, timing cues, and where to preserve volume versus exaggerate for effect. It categorizes objects by elasticity (high, medium, low) and maps appropriate squash/stretch magnitudes and easing patterns. It also highlights interactions with timing, anticipation, and follow-through to keep deformation believable.

When to use it

  • Designing button taps, list overscroll, or micro-interactions in UI/motion design
  • Animating character performance: jumps, hits, facial expressions, and walk cycles
  • Animating logos and branding to add playful personality or subtle life
  • Implementing game feel: jump arcs, hit reactions, and collectible pulses
  • Polishing transitions and notifications so they read with weight and intent

Best practices

  • Preserve apparent volume: widen when squashing, narrow when stretching
  • Match deformation amount to material: 50% for rubbery, 2–5% for subtle UI
  • Tie squash/stretch to velocity and timing: faster impacts = more squash
  • Apply deformation where force is applied; avoid uniform scaling across the whole object
  • Ease in and out of extremes; never let squash/stretch snap abruptly

Example use cases

  • A button press that briefly squashes to 95–98% height for tactile feedback
  • A character leap that stretches on ascent and squashes on landing to read momentum
  • A bouncing logo that exaggerates squash for playful brand personality
  • A hit reaction where a brief squash sells impact before a knockback animation
  • A list 'rubber-band' overscroll that stretches slightly for a natural feel

FAQ

How much deformation should I start with?

Begin with ~10% for energetic, rubbery motions and 2–3% for subtle polish; adjust for material and tone.

Will squash/stretch make objects look unrealistic?

If volume preservation and easing are respected, squash/stretch enhances believability; overdoing it or breaking volume causes the odd, growing/shrinking look.