How to Animate a Bouncing Ball

Why start with a bouncing ball?

Almost every animator's first exercise is a bouncing ball, and for good reason. It is simple enough to finish in an afternoon, yet it contains the core principles you will use for the rest of your career: arcs, timing, spacing, and squash and stretch. Get a ball to bounce convincingly and you understand the foundations of movement itself.

A ball is also honest. It has no personality to hide behind, so any mistake in weight or timing is immediately obvious. That makes it the perfect place to train your eye. If you have not yet read the frame-by-frame animation guide, it is worth a look first for the vocabulary used here.

The arc: a ball moves on a curve

Real objects almost never travel in straight lines. Thrown or dropped, a ball follows a smooth curved path called an arc. Planning that arc before you draw a single in-between is the key to natural motion. Sketch the whole path first — the rise, the peak, the fall, the bounce — as a light guide line, then place your frames along it.

Spacing: the secret to weight

Gravity accelerates a falling ball, so it covers more distance in each successive frame as it drops — and less distance in each frame as it rises and slows. That means your frames should be far apart near the ground (fast) and bunched together near the peak (slow). This uneven spacing is what your eye reads as gravity and weight.

On the way back up the pattern reverses: wide spacing just after the bounce, tightening as the ball approaches the top of its arc and slows to a momentary stop. If this idea is new, the timing and FPS guide covers spacing in depth.

Squash and stretch on impact

As the ball races toward the ground it stretches slightly along its direction of travel. At the instant of contact it squashes — wide and flat — to sell the force of impact. As it rebounds it stretches again, then eases back to a round shape near the top where it is barely moving.

Remember to keep the ball's volume constant — squash wider, stretch thinner. The full principle is explained in the squash and stretch guide.

Build it step by step in FrameAnim

Here is the exact order to build a single bounce. Turn on onion skinning before you start so you can see each previous frame as you place the next:

1. 1
   Draw the start and contact frames

   Place the ball at the top of its arc, then draw a second frame where it hits the ground, squashed wide and flat.
2. 2
   Add the rebound peak

   Draw the ball back up in the air after the bounce, slightly lower than the first peak because it loses energy.
3. 3
   Fill in the falling frames

   Add in-between frames between the top and the ground, spacing them further apart as the ball speeds up toward impact.
4. 4
   Fill in the rising frames

   Add in-betweens on the way up, bunching them closer together near the peak as the ball slows down.
5. 5
   Add squash and stretch

   Stretch the ball on the fast frames near the ground and squash it wide on the contact frame.
6. 6
   Play, adjust, repeat

   Loop the animation, check the spacing and timing, and refine until the bounce feels weighty and natural.

Making it bounce more than once

A ball loses energy with every bounce, so each arc should be lower and shorter than the one before. The bounces also get closer together in time as the ball runs out of height. Eventually it settles: a few tiny hops, then a stop. Getting this decay right is what makes a multi-bounce animation feel real rather than like a ball trapped in a loop.

A satisfying sequence might be a big first arc, a medium second, a small third, then a couple of little settling hops. Keep the arcs shrinking and the timing tightening and gravity does the rest of the storytelling.

Common mistakes

• Even spacing. If every frame is the same distance apart, the ball floats like it is on the moon. Spread the frames near the ground and bunch them near the peak.
• Straight-line motion. No arc means no life. Always plan the curved path first.
• Squashing at the wrong time. The ball should only squash at the moment of contact, not while it is in the air.
• Equal bounces. Real balls lose energy. Each bounce must be lower than the last, or the motion looks like a loop rather than a fall.
• Changing size. Watch the volume — the ball should never appear to grow or shrink as it squashes and stretches.

Where to go next

Once your ball bounces convincingly, you have the foundations for far more. Try giving the ball some personality — a nervous ball, an excited ball — using only timing and spacing. Then move on to the walk cycle tutorial, which applies the same principles to a character. You can also compare your work against the looping version on the animation examples page.