Squash and stretch
A shape stretches as it moves and flattens on impact, making speed, softness, and weight visible.
See it
What it is
Squash and stretch changes an object's proportions to suggest force, speed, and weight. Stretch it along the direction of travel while it moves quickly, then squash it across that axis on impact. It is the first of the twelve principles Frank Thomas and Ollie Johnston set down in 'The Illusion of Life', and the useful constraint is preserving apparent volume: when one axis shrinks, the other grows.
Reach for it on balls, blobs, mascots, reaction icons, and deliberately playful controls. A firm object gets only a few percent of deformation; a soft or rubbery one can take much more. Timing the widest squash to the exact contact frame is what sells the weight.
Gotcha: deforming text, borders, and detailed icons looks like a raster error. Put the squashing shape on an inner wrapper and keep legible content on a stable layer. Always return both axes to scale(1), and do not combine large deformation with a long settle unless the whole interface has a cartoon motion language.
Ask AI for it
Animate this bouncing shape with squash and stretch using CSS @keyframes. During the fall, use scaleX(0.9) scaleY(1.12); on the exact contact frame, use scaleX(1.16) scaleY(0.86); then return both axes to 1 with one short spring-like settle. Apply deformation to an inner shape wrapper so its label stays undistorted, set transform-origin: center bottom, and remove all deformation under prefers-reduced-motion.