Design Atlas
한국어
↝ Motion

Squash and stretch

스쿼시 앤 스트레치

The animation principle where a moving or colliding object squashes and stretches while keeping its apparent volume — the first of Disney's 12 principles of animation.

Also known as: Squash & stretchDisney's 12 principles
···
html
<div class="floor"></div><div class="ball"></div>
css
.floor{position:absolute;left:10%;right:10%;bottom:22%;height:2px;background:var(--line)}
.ball{position:absolute;left:50%;bottom:22%;--d:clamp(28px,16vmin,46px);width:var(--d);height:var(--d);
  margin-left:calc(var(--d) / -2);border-radius:50%;background:var(--accent);transform-origin:bottom center;
  animation:bounce 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes bounce{
  0%{transform:translateY(-34vmin) scale(1,1)}
  40%{transform:translateY(-34vmin) scale(.9,1.1)}
  46%{transform:translateY(0) scale(1.35,.6)}
  52%{transform:translateY(0) scale(.85,1.15)}
  58%{transform:translateY(-9vmin) scale(1,1)}
  100%{transform:translateY(-34vmin) scale(1,1)}
}

The instant a ball hits the ground it widens and flattens (squash); the instant it launches back up it stretches tall and narrow (stretch). The key is volume preservation — if one axis grows, the other must shrink, or it stops reading as a real object. In CSS this is inversely-proportional scaleX/scaleY values across keyframe stops.

Rigid materials (stone, metal) barely squash; soft ones (a rubber ball, a cartoon character) squash a lot — it's also a visual cue for how stiff something is.

When to use

Use it for loading indicators, button-press feedback, or character jumps where you want elasticity to read. Don't overdo it on rigid UI elements like cards and panels.