Squash & stretch

Full motion specification

How the movement works

Use it to give a character or logo weight and softness.

1. 01A round character, radius 37. One bounce per 1.175 s (four per 4.7 s), a 92 px parabola. It drifts ±150 px sideways on a sine wave over the cycle.
2. 02On the ground (first and last 10% of each bounce): vertical scale goes between 0.52 (moment of impact) and 1.28 (moment of leaving) on a quadratic curve.
3. 03In the air: vertical scale = 1 + 0.28 × s^3, where s is the time offset from the apex (0 at the apex, 1 at take-off and touchdown), so it is stretched where it moves fast.
4. 04Horizontal scale is always 1 ÷ vertical (volume is preserved). The transform is anchored at the feet.
5. 05The shadow gets smaller and thinner with height. Short yellow lines flick out left and right at each landing (for about 18% of a bounce).