The Animator's First Un-squashed Stretch: On the Elastic Timing of a Perfectly Optimized Interaction

In the world of traditional animation, there exists a foundational principle known as 'squash and stretch.' It’s the technique that gives a bouncing ball its weight, a grinning face its life, and a falling anvil its sense of impending doom. It is, fundamentally, the illusion of physics applied to drawings. For decades, animators have understood that to make movement feel believable, it cannot be mechanically uniform. It must breathe. It must have anticipation, action, and reaction. It must have timing.

We, as front-end developers and performance engineers, have become masterful at the 'squash.' We compress our bundles, minify our code, and aggressively optimize our images. We measure success in milliseconds shaved off a First Contentful Paint. But in our relentless pursuit of raw speed, we often forget the 'stretch.' We deliver a page that loads in a blink, only to have its interactive elements—its buttons, its menus, its expanding cards—respond with the jarring, robotic immediacy of a light switch. The page is fast, but it feels brittle.

This is where the animator’s lesson on timing becomes our most crucial performance metric. A button that changes state the very nanosecond it is clicked does not feel responsive; it feels unnerving. It lacks the subtle elasticity of the physical world. The 12 principles of animation, devised at Walt Disney Studios, are not about decoration. They are a deep study in human perception and what our brains register as 'real.'

Applying this to the web means understanding that performance is not just about how quickly something happens, but how it happens. A well-timed interaction borrows from the animator’s playbook. It uses a deliberately brief, intentional delay—a mere 50 to 100 milliseconds—to acknowledge the user's action before the reaction begins. This is the 'stretch.' It’s the micro-pause that gives a modal window the weight to feel like it’s sliding into place, not just teleporting. It’s the easing function that makes a collapsible menu feel like it’s unfolding, not just snapping open.

This approach doesn’t make an experience slower; it makes it coherent. It builds layout stability not just in the visual sense of Cumulative Layout Shift, but in the psychological sense of predictable, comfortable motion. A perfectly optimized interaction isn't the one with the shortest possible JavaScript execution time. It's the one that understands the user’s expectation of physics, borrowing the animator’s sense of timing to turn a sequence of efficient operations into a moment of genuine connection. The page doesn't just load fast; it feels alive.

Notes & further reading

A few pages I came back to while writing this: