MixavisdocsHomeCommunityOpen editor
DOCS/Drivers

Squash & Stretch

Behaviors

Stretch along the direction of travel, squash across it — driven by the layer's own speed.

The oldest trick in animation, applied automatically. The faster the layer moves, the more it stretches along its path and narrows across it. When it stops, it returns to shape.

Volume is preserved — the layer never gains area, which is what separates squash and stretch from a scale wobble.

When to reach for it#

  • Bouncing balls, dropping objects, anything with impact.
  • Fast UI transitions that would otherwise feel stiff.
  • Characters and mascots, paired with Jiggle for secondary motion.

How it works#

The driver measures speed over a short window, scales it against At speed to get a 0–1 amount, and applies that as a stretch along the dominant axis of travel with the inverse across it.

The axis is blended from the velocity components rather than switched on whichever is larger. A hard switch pops visibly on the frame a diagonal move crosses 45°; a blend does not.

This driver writes scaleX and scaleY together, so it does not need a target property — the picker is hidden for it.

Parameters#

Amountamount#

How much distortion at full speed. 0.35 is a healthy cartoon amount. Above 0.6 things look like liquid, which is sometimes exactly right.

At speedrefSpeed#

The speed in pixels per second at which Amount is reached in full. Set this near the fastest your layer actually moves, or the effect is either invisible or pinned at maximum the whole time.

Smoothsmooth#

The window over which speed is measured. Short reacts on the frame; long smooths out a jittery path but lags the impact.

See also#

driversBounce — the motion this was made to accompany→driversAuto-Orient — the other speed-reading driver→

Something here wrong or missing? Tell us in the community.