The Animator’s Squash and Stretch: On the Forgotten Physics of Layout Instability

The pages we build are not static artifacts. They are, in their most vibrant moments, living scenes. They breathe, they shift, they respond. Yet, all too often, this dynamism feels less like a deliberate performance and more like a series of small, frustrating tremors. A button you’re about to click abruptly shuffles downward. A paragraph of text you’ve just started reading jumps as a late-loading image barges in from the top. This is layout instability, and while we measure it with cold metrics like Cumulative Layout Shift (CLS), we experience it as a betrayal of a fundamental principle: the physics of our visual world.

To find a solution, we must look beyond our usual bag of front-end tricks. We can turn instead to the foundational principles of animation, specifically to a concept known as "squash and stretch." For animators of the golden age, this wasn't a mere stylistic flourish; it was the fundamental law for depicting weight, mass, and believability. When a cartoon character leaps, they stretch out, elongating their form to suggest velocity and trajectory. When they land, they squash down, compressing to communicate the impact and solidity of the ground. The key is that the volume of the character feels constant; the form deforms, but it doesn't unpredictably teleport or change its fundamental presence in the scene. It respects a visual consistency that our brains accept as real.

Our web pages, in their jarring shifts, do the opposite. They break this rule of consistent volume. An element doesn't deform elegantly into its new position; it abandons its post. The user’s mental model of the page—the spatial map they’ve built in an instant—is shattered. They are left not with the satisfying impact of a well-landed character, but with the confusion of a glitch in the matrix. We have ignored the physics of the screen.

The Discipline of the Reserved Space

So, how do we translate "squash and stretch" from animation cells to CSS? It’s about embracing the discipline of the reserved space. Just as an animator meticulously plans the arcs and volumes of a character’s movement, we must meticulously plan the spatial footprint of every element on our page before its content is fully realized. This is the "volume" of our UI components. For an image, this means defining its aspect ratio from the outset, using tactics like the ubiquitous padding-top hack or the modern `aspect-ratio` CSS property. The container maintains its shape, its place in the layout, and when the image loads, it simply stretches to fill its pre-allocated box. It’s a smooth fill, not a disruptive insertion.

The same principle applies to dynamically injected content, like a banner ad or a freshly loaded comment. Instead of letting it burst onto the scene, we must first create a placeholder—a reserved block of space that acts as a promise of what is to come. This placeholder squashes the content below it intentionally, as part of the initial page layout. When the real content loads and stretches to fill that reserved void, the transition feels natural. The layout is stable because we’ve traded unpredictable deformation for a choreographed one. The user’s focus is preserved because the visual physics of the page remain consistent. We are, in effect, not just engineers of code, but animators of experience, applying the timeless principles of motion to create interfaces that feel as solid and believable as the world around us.

Notes & further reading

A few pages I came back to while writing this: