AnimationBeginner

Squash & Stretch

Deforming a shape along its motion to sell weight, speed, and material.

animation-principlejuicephysicality

Examples

Captured from this page's own interactive demo below.

Overview

Squash & stretch is the oldest of the classic 12 animation principles: objects stretch when moving fast and squash when they hit something or change direction sharply, while (in the simplest version) preserving apparent volume.

It works because real deformable materials actually behave this way, and even rigid objects get exaggerated this way in cartoons to communicate force. Our visual system reads the deformation as evidence of momentum and impact.

It makes things feel alive, springy, and physically present — the difference between a ball that looks like a decal sliding around versus one that feels like it has mass and is bouncing.

Interactive Demo

Squash Amount0.3

Bounce Speed1.1

Use Cases

PlatformerHyper CasualMatch-3UI

Best Practices

Do

✓Stretch along the direction of motion, squash along the direction of impact.
✓Keep total volume roughly constant — stretch on one axis should compress the other.
✓Use it on UI elements too (buttons, icons) in small doses — it reads as tactile, not just cartoonish.

Don't

✕Don't apply it to rigid, obviously hard materials (stone, metal) at cartoon-level exaggeration — it breaks material read.
✕Don't let the deformation persist after the impact/motion ends — it should snap back quickly.
✕Don't scale non-uniformly without easing — a linear squash/stretch looks mechanical, not springy.

Common Mistakes

⚠Squashing and stretching the collider/hitbox along with the visual mesh, breaking gameplay.
⚠Using the same curve for every object regardless of its implied weight or material.
⚠Overdoing it until every object looks like rubber.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Squash & Stretch" game-feel effect to my project: Deforming a shape along its motion to sell weight, speed, and material.

How it works: Squash & stretch is the oldest of the classic 12 animation principles: objects stretch when moving fast and squash when they hit something or change direction sharply, while (in the simplest version) preserving apparent volume.

Guidelines:
- Stretch along the direction of motion, squash along the direction of impact.
- Keep total volume roughly constant — stretch on one axis should compress the other.
- Use it on UI elements too (buttons, icons) in small doses — it reads as tactile, not just cartoonish.

Avoid:
- Don't apply it to rigid, obviously hard materials (stone, metal) at cartoon-level exaggeration — it breaks material read.
- Don't let the deformation persist after the impact/motion ends — it should snap back quickly.
- Don't scale non-uniformly without easing — a linear squash/stretch looks mechanical, not springy.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.