Squeeze while it stretches

Pull the tip in as the arrow stretches, so it feels alive.

Josh W. Comeau@joshwcomeau.com
✨ Have you ever heard of Disney’s 12 Basic Principles of Animation? The very first rule, “Squash and Stretch”, can make motion feel *way* more satisfying. I just dropped a brand-new blog post that shows how I’ve been using this technique in my own work: www.joshwcomeau.com/animation/sq...
Apr 13, 2026View on Bluesky ↗
Josh W. Comeaujoshwcomeau.com
The arrows aren’t just getting longer; to really sell the effect, the tips of the arrow get pulled in slightly, as though the arrow was getting thinner as it gets longer.
Squash and StretchRead article ↗

1 · Hover the arrows

Hover, focus or tap each button.

Stretch onlyBad
tip: translateX(3px)
Stretch and squeezeGood
tip: translateX(3px) scaleY(.71)
.btn { --k: 0; transition: --k 200ms var(--ease-out); }
.btn:hover { --k: 1; }

.shaft { transform: scaleX(calc(1 + var(--k) * .21)); }
.tip {
  transform: translateX(calc(var(--k) * 3px))
             scaleY(calc(1 - var(--k) * .29));
}

2 · Freeze it halfway

Drag the slider to hold the arrow mid-stretch.

Stretch onlyBad
tip x +3.0, y ×1.00
Stretch and squeezeGood
tip x +3.0, y ×0.71
.arrow-shaft { transform: scaleX(1.21); }
.arrow-tip {
  transform: translateX(3px) scaleY(.71);  /* x: follow the shaft, y: squeeze */
}

Why it matters, pros and cons

Why it matters

Stretching alone looks mechanical. Pulling the other axis in keeps the arrow's volume and makes it feel elastic.

Pros

  • Two small transforms, no JavaScript and no extra assets.
  • Tiny amounts (3px, 30%) read as life, not as a cartoon.
  • One variable drives both parts, so hover, focus and tap stay in sync.

Cons

  • Easy to overdo: past a few pixels it looks rubbery.
  • Needs non-scaling strokes or the line weight distorts as it squashes.
  • Icon-only motion is easy to miss, so never rely on it for meaning.