The JKLMN Guide to Squash and Stretch: Animating a Simple Scene with a Coffee Mug

A coffee mug sits on a desk. It tips, falls, and hits the table. Without squash and stretch, the impact feels like a rigid block—no life, no weight. But add just a little deformation, and the mug suddenly feels real. It bounces, wobbles, and settles. That's the magic of this principle, and it's easier to learn than you think. In this guide, we'll animate a simple mug drop from start to finish, focusing on the practical decisions that make squash and stretch work.

Why Squash and Stretch Matters for a Falling Mug

When a solid object hits a surface, it doesn't stay perfectly rigid—at least not in animation. Squash and stretch mimics the way real materials compress and rebound, even if only for a few frames. For a ceramic mug, the effect is subtle: the mug flattens slightly at the bottom on impact, then stretches as it bounces upward. Without this, the action looks like a physics simulation from a 1990s video game—stiff and unconvincing.

The key is understanding that volume should remain roughly constant. When the mug squashes (gets wider and shorter), it must stretch (get narrower and longer) to compensate. Think of a water balloon: squeeze it and it bulges; release and it elongates. Your mug follows the same logic, though with less exaggeration. We're aiming for a natural bounce, not a cartoon explosion.

This principle also communicates weight. A heavy mug will squash less and recover faster; a lightweight plastic cup would deform more. By adjusting the amount of squash and the number of bounce frames, you tell the audience how heavy the object is. That's a storytelling tool, not just a technical checkbox.

What Happens Without Squash and Stretch

If you skip it, the mug will stop dead on the table. The audience won't consciously notice the missing frames, but the action will feel wrong—like the mug is glued to the surface. Adding even a two-frame squash at the impact point transforms the motion. It's one of the cheapest ways to add polish.

Setting Up Your Scene and Keyframes

Before you animate, you need a clean starting point. Open your 2D animation software (we'll assume something like Toon Boom, Adobe Animate, or even a frame-by-frame tool like Krita). Create a new scene with a simple background—a table line and a wall if you want context. The mug should be a simple shape: a rectangle with a curved bottom and a handle. Keep it flat-shaded; no textures needed.

We'll work at 24 frames per second, which is standard for film. The entire action—tip, fall, hit, bounce, settle—will take about 30-40 frames. That's roughly 1.5 seconds. You can adjust timing later, but this gives a natural rhythm.

Planning the Arc

The mug falls in an arc from the edge of the table. Draw a rough path: it starts tilted, rotates as it drops, and hits the table at an angle. The impact point is where squash happens. Mark that frame as your keyframe 2 (the lowest point). Keyframe 1 is the mug just before impact, and keyframe 3 is the mug at the peak of the first bounce. We'll build from these three poses.

Keyframe 1: Approaching Impact

One or two frames before the mug hits, it should be in its stretched shape—slightly longer and narrower than the rest pose. This anticipates the squash. The handle might also stretch a bit, but keep it subtle. The mug is still falling, so the bottom edge is just above the table surface.

Keyframe 2: The Squash

On the exact frame of impact, the mug compresses. The bottom flattens against the table, and the top moves downward. The width increases by maybe 10-15%, and the height decreases by the same percentage. The handle might bend outward slightly. This frame lasts only one or two frames—don't hold it.

Keyframe 3: The Stretch on Rebound

As the mug bounces up, it stretches. The bottom leaves the table, and the mug becomes taller and narrower than its rest shape. The handle stretches upward. This pose is the opposite of the squash. Again, one or two frames is enough. After this, the mug returns to its rest shape and settles with small wobbles.

Refining Timing and Spacing

Now that you have keyframes, it's time to adjust the in-between frames. The fall should accelerate: the mug moves faster as it gets closer to the table. That means fewer frames near the impact, and more frames at the start of the fall. Use the spacing of your drawings to control speed—tight spacing means slow motion, wide spacing means fast motion.

For the bounce, the opposite happens. The mug slows down as it rises, so frames are closer together near the peak of the bounce. After the first bounce, each subsequent bounce gets smaller and faster. A typical sequence: first bounce rises to about half the original drop height, second bounce to a quarter, then a tiny third bounce, then settle. Each bounce has its own squash and stretch, but the deformation gets smaller each time.

Using a Timing Chart

Draw a small chart on the side of your canvas: mark frames 1-40, and note where each keyframe falls. For example: frame 1 (mug at edge, starting to tip), frame 10 (just before impact), frame 11 (squash), frame 12 (stretch on rebound), frame 18 (peak of first bounce), frame 19 (squash on second impact), etc. This keeps you from guessing.

Adding Overlap and Follow-Through

The mug's handle and any liquid inside (if you draw coffee) should move slightly after the main body stops. On the squash frame, the handle might still be moving downward for one extra frame. This is overlap. Similarly, when the mug settles, the handle wobbles for a few frames. These small details sell the illusion of weight and material.

Tools and Techniques for Consistent Deformation

You don't need fancy rigs to squash and stretch a mug. In frame-by-frame animation, simply redraw the shape on each frame, keeping volume consistent. If you're using cut-out animation (bones and meshes), create a deformer or use a lattice tool to scale the mug non-uniformly. Many 2D programs have a 'squash and stretch' controller that scales along one axis while compensating on the other—use it, but check that the volume looks right.

For hand-drawn animation, a simple trick is to draw the mug's center line and measure the height and width on each frame. Keep the product of height and width roughly constant. For example, if the rest mug is 100 pixels tall and 60 pixels wide (area 6000), then a squash might be 80 tall and 75 wide (area 6000). A stretch might be 120 tall and 50 wide (area 6000). This isn't exact science—ceramic doesn't perfectly conserve volume—but it's a good guide.

Onion Skinning

Always use onion skinning to see the previous and next frames. This helps you maintain smooth motion and avoid jarring jumps. If the mug's shape changes too abruptly between frames, add an extra in-between frame to ease the transition.

Testing the Timing

Play the animation at full speed. Does the mug feel like it's bouncing, or does it stutter? If the squash frame holds too long, the mug will appear to stick to the table. If the stretch is too extreme, it'll look like rubber. Adjust frame counts: try moving the squash to a single frame instead of two, or reducing the stretch amount. Small changes make a big difference.

Variations: Different Mugs, Different Weights

Not all mugs behave the same. A heavy ceramic mug should squash very little—maybe 5% deformation—and bounce only once or twice. A lightweight paper cup would squash 20% and bounce several times, with more wobble. A glass mug might shatter (different principle), but for this exercise, stick with ceramic or plastic.

You can also vary the surface. A wooden table gives a dull thud and minimal bounce; a metal table might produce a higher bounce with more vibration. Adjust the number of bounce frames and the squash amount accordingly. For a soft surface like a carpet, the mug might not bounce at all—just squash and stay.

Adding Liquid

If you animate coffee inside the mug, the liquid has its own squash and stretch. It sloshes independently, with a delay. The coffee surface ripples on impact and continues moving after the mug stops. This adds complexity but also realism. For beginners, start with an empty mug, then add liquid in a second pass.

Different Angles

The mug doesn't have to fall straight down. Try a scenario where it tips off a table edge and rotates 90 degrees before hitting the floor. The squash then happens on the side of the mug, not the bottom. The same principles apply, but you need to rotate the deformation axis. This is a good next step after the basic drop.

Common Pitfalls and How to Fix Them

The most common mistake is over-exaggerating the squash and stretch. Beginners often make the mug flatten to half its height, which looks like a cartoon. For a realistic mug, keep deformation under 15%. If it looks too subtle, add a motion blur or a small dust puff at impact instead of more squash.

Another pitfall is inconsistent volume. If the mug gets wider without getting shorter, it appears to gain mass. Check your measurements every few frames. Also, watch the handle—it often gets forgotten and stays rigid while the body deforms. The handle should squash and stretch with the body, though with a slight delay.

Timing issues are also common. If the bounce feels floaty, the mug is staying in the air too long. Reduce the number of frames between impacts. A typical bounce sequence: impact, 6 frames up, 6 frames down, impact, 4 frames up, 4 frames down, impact, 2 frames up, 2 frames down, settle. Adjust based on the weight you want.

Finally, don't forget the settle. After the last bounce, the mug should have a tiny wobble—one or two frames of overshoot and return. Without it, the mug stops dead, breaking the illusion. A simple ease-out curve on the final position fixes this.

Debugging Checklist

• Is the squash frame held too long? Reduce to 1 frame.
• Does the mug change area? Check height × width.
• Is the bounce too high? Reduce stretch amount.
• Is the handle moving with the body? Add overlap.
• Does the action feel smooth? Use onion skinning.

After you fix these, play the animation again. It should feel natural and satisfying. If not, go back and adjust one variable at a time—don't change everything at once.