The Animator’s Squash and Stretch: On the Deceptive Elasticity of a Cumulative Layout Shift

In the earliest days of hand-drawn animation, pioneers like the teams at Disney established a set of foundational principles. Among the most crucial was ‘squash and stretch’. It’s the principle that gives a bouncing ball its weight and life, flattening on impact and elongating in mid-air. Without it, movement feels rigid, unnatural, and jarring. The ball is just a circle sliding up and down. This principle, born in a smoky artist’s studio a century ago, holds a profound, if unexpected, lesson for the modern craft of building for the web.

Consider the Cumulative Layout Shift (CLS) metric. On a technical report, it’s a decimal, a score representing the sum of unexpected layout movements. But for the user, it’s the equivalent of a poorly animated scene. The page loads, you move your cursor to click the ‘Add to Cart’ button, and in that precise moment, a newly loaded image or a slow-to-render font shoves the entire interface downward. Your click, intended for the button, lands on a promotional banner for a product you don’t want. The interface has ‘squashed’ your intention against the unforgiving glass of the screen.

An animator understands that a successful squash and stretch requires two things: a stable, anchored point of contact and a predictability to the deformation. The ball flattens, but its point of contact with the ground remains fixed. The user’s experience of a web page demands the same stability. When we fail to define dimensions for images, when we inject third-party content without reserving its space, or when fonts swap in with different metrics, we are animating our layout without the principle of a fixed point. The page stretches and squashes arbitrarily, and the user becomes an unwilling participant in a clumsy cartoon.

The fix, then, isn't merely a technical checklist of setting `width` and `height` attributes or using `content-visibility`. It's an artistic shift in perspective. We must start treating our initial layout as the character’s ‘resting pose’. Every element that will eventually load, populate, or shift must have its space accounted for in this initial keyframe. Think of it as drawing the key poses of the ball at the top of the arc, at the point of impact, and on the rebound. By reserving space, we are defining the boundaries of the animation. The layout can still ‘breathe’ as content flows in, but it does so within a predictable, stable framework, much like a well-animated character whose volume remains constant even as its shape distorts.

Embracing this borrowed principle forces us to see layout shifts not as isolated bugs, but as breakdowns in the narrative flow of the user’s journey. A high CLS score isn't just a performance failure; it's a failure of storytelling. It's the moment the audience is jolted out of the film’s illusion. By adopting the animator’s discipline of squash and stretch—prioritizing anchored stability and predictable motion—we can build interfaces that feel less like a collection of independent elements loading at random, and more like a cohesive, believable, and graceful performance. Our users aren't just visiting a page; they are participating in a sequence of events. It’s our job to ensure that sequence doesn’t feel like a poorly drawn cartoon.

Notes & further reading

A few pages I came back to while writing this: