The space between the frames

Movies are made up of a sequence of still images, called frames.

While frame rates vary, every video is composed of these discrete images. To show us convincing, realistic motion, then, all films rely on the audience's brains to infer the details between each frame.

The human mind carries out this interpolation effortlessly. Our brains are inference engines, parsing the discrete pictures shown and applying our prior understanding of the world to fill in the gaps and stitch the frames together.

Animated films are especially reliant on this innate human ability. The images on screen, as well-drawn as they may be, are usually not what we'd call photo-realistic.

But you don't need to have met a sentient candlestick before to (at least playfully) believe that this character is alive. Disney's animators convince your mind of the candlestick's lifelike qualities through carefully-crafted illustrations. This illusion of life is what makes animation so magical.

Principles of animation

But the illusion doesn't come from some secret formula. Disney's animators themselves have published a list of principles that guide new animators in how to construct this illusion, in the fittingly-titled book The Illusion of Life.

They detail twelve principles in total, but several are different permutations of this same general idea: help the audience believe your animated characters move realistically by applying real-world physics to the objects in your animations.

Laws of physics

Most people have an intuitive understanding of basic laws of physics. When objects in an animated film follow those laws, we're more inclined to accept them as realistic, because they behave more like the world we're used to seeing all around us.

In other words, for animators, following these laws helps them make animations visually convincing—even if the objects in their frames are not drawn photo-realistically, and even if they're drawn pretty poorly.

To demonstrate this, let's take a look at some poorly-drawn animations.

A bouncing ball

Let's tackle every animation class's introductory assignment: drawing a ball that's bouncing up and down off the ground. Technically, you could try to pass this off as a solution:

But if you told me that this was a bouncing ball, I wouldn't believe you. It looks more like a circle moving around on the canvas. The animation looks lifeless to our eyes, because it contains no cues to help our brains imagine that circle as a bouncing ball as we watch the frames go by.

We can start to make this animation more convincing by incorporating a basic principle of animation called squash and stretch.

Squash and stretch

The idea behind squash and stretch is simple—when objects accelerate or decelerate, they deform. So draw them that way. It helps to exaggerate the effect a bit, too. That makes it easier for our brains to get the hint.

Here's the same animation as before, with a couple small tweaks based on the principle of squash and stretch. Click through each frame, or press play to see the difference:

As you can see, this second iteration of our bouncing ball is almost the same as the first: except, in the three frames before, during, and after the ball impacts the ground, we squash and stretch it, exaggerating its deformation upon impact with the ground as it bounces.

This makes the bouncing ball a bit more realistic, but overall, it's still not very convincing. What's missing is consideration for another principle of animation: timing and spacing.

Timing and spacing

Timing and spacing refers to how an animated object moves through the view port across frames. By varying the distance that the object moves, animators can confer information about an object's speed, and thus, acceleration and deceleration, within our animated world.

Up until now, our bouncing ball has been missing some timing details. The distance the circle travels on the canvas has been the same across the frames. This third iteration changes that—can you tell what's changed?

In this one, we've changed the spacing of the frames between the top and bottom of the ball's range of motion. Now there are more frames towards the top and bottom of the ball's arc than in the middle.

Our brains interpret those additional frames temporally, inferring that the ball is spending more time at those points in its arc. This reminds our brains of real-world physics—as the ball falls, it accelerates, and as it bounces upwards, it decelerates.

More timing and spacing

While the last animation looks more physically realistic than the first two, something is still off. The ball progresses through the frames at the top of its range of motion too quickly.

This makes it look less like the ball is bouncing and more like someone is dribbling it. We're not allowing enough frames to effectively suggest to our brains that we're watching gravity act naturally upon our circle.

To fix this, we can just add two extra frames into the top of the ball's range of motion, keeping the squash-and-stretch and timing elements from our previous iterations the same:

To my eye, this last animation crosses a threshold. While the previous three were circles moving around on a page, the last one actually kind of looks like a bouncing ball (if you squint at it, at least).

The audience makes the movie

To be clear, none of these animations are particularly good. They're all crudely hand-drawn in a browser with a laptop trackpad. And yet, the fourth animation looks considerably more lifelike than the first.

Remarkably, almost none of this lifelike quality exists on the canvas itself. We've incorporated just enough physics to remind the audience of what reality looks like. From there, human minds fill in the details subconsciously.

The job of the animator, then, is not to draw every bit of information onto the canvas. Instead, it is to include just enough correctly-structured detail, giving the audience the visual information they need to finish the movie for themselves.