The Animator's First Unkeyed Inbetween: On the Flickering Motion of a Perfectly Drawn, Yet Unpaced, Sequence

In the quiet glow of the light table, the keyframes were perfect. The senior animator had laid down the crucial poses with a master’s confidence: the apex of a leap, the squash of impact, the stretch of recoil. Each drawing was a work of art, a singular moment of expressive clarity. The sequence’s potential was all there, captured in a handful of exquisite cels. The rest, the connective tissue of motion, was left for the junior to complete—the inbetweens.

She approached the task with a diligent reverence, her hand steady as she traced the graceful arcs. Frame by frame, she filled the gaps, ensuring each line flowed smoothly into the next. The movement on the page was fluid, a perfect geometric interpolation from one key pose to another. Yet, when the test reel was run, something was deeply wrong. The character didn’t move; it flickered. The motion was there, but it felt unnatural, a ghostly shuddering that lacked weight and intention. It was technically complete, yet fundamentally unstable.

This is the subtle, often overlooked craft of pacing in animation, a discipline that finds a direct parallel in the front-end developer’s quest for layout stability. We pour immense effort into our keyframes: the initial DOM content, the CSS that defines our elements, the loaded hero image. We assume that if these key states are well-defined, the transition between them will be seamless. But without defining the pacing, without controlling the ‘inbetweens’ of the browser’s render cycle, we create a flickering experience for the user.

The Unpaced Render

The browser, much like our junior animator, is simply following instructions. It renders what it has, when it has it. A web font loads a half-second after the fallback flashes into place. An image finally arrives, but its dimensions were not reserved, causing a jolting reflow of the entire text block. A component’s data fetches, and its sudden appearance shoves a ‘Read More’ button below the fold. Each of these is an unkeyed inbetween—a state of transition we failed to define and control.

The result is Cumulative Layout Shift (CLS), the front-end equivalent of that flickering test reel. It’s not that the final page is broken; it’s that the journey to it is unstable. The user’s focus is broken, their click misses its target, their sense of the page as a solid, reliable object is undermined. We delivered the keyframes but forgot to direct the motion.

The craft, then, lies in becoming the director of the inbetween. It is the explicit `width` and `height` attributes on an `img` tag, creating a box that holds its space like a storyboarded cel. It is the `font-display: optional` directive, making a deliberate choice to avoid the flash of unstyled text, even if it means a brief moment of a fallback. It is the skeleton screen that reserves the shape of content to come, preventing the jolt of unexpected elements. These are not mere performance optimizations; they are the careful charting of motion, the pacing that turns a series of disjointed states into a smooth, believable, and stable performance.

To build for the web is to animate in time with the user. We must author not only the destination but the entire journey, ensuring that every step between the keyframes is as considered and stable as the poses themselves. For the true illusion of life, both in cartoon and in code, is found not in the perfect poses, but in the grace of the movement between them.

Notes & further reading

A few pages I came back to while writing this: