Bouncing Ball Animation: In This Model, Most Frames Sit High

Open the diagram full size

Frame 1 puts the ball at the top; frame 3 has moved it only 8 pixels down. That slow start is the central lesson of bouncing ball animation. In this site’s model, a 24-frame loop at 12 frames per second, the ball falls in frames 1 to 12, squashes on the floor in frame 13 and rises in frames 14 to 24.

At 12 frames per second each frame lasts about 83 milliseconds, so the whole loop takes 2 seconds. The model is a simple free fall with air resistance ignored; every number on this page comes from it, and the frame data can be downloaded.

How the 24 frames are spent

A bouncing ball, 24 frames

Every frame, side by side

1. 1top
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13squash
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

Watch where the ball spends its time: it hovers near the top, then crosses the lower half of the drawing area in a few quick frames. The fall from the top to the floor takes 12 frame steps, 1 second, and the climb back is its mirror image.

The floor gets a single frame. Frame 12 is still 46 pixels above the touch, frame 13 squashes on the floor and frame 14 is 46 pixels back up, so the contact lasts one frame, about 83 milliseconds. In frame 13 the ball keeps its bottom on the floor, shrinks to 0.7 of its height and widens to 1.43 times its width. Those two numbers multiply to about 1, so the ball keeps its area and still reads as the same solid object.

That squash is not the held frame, a frame that deliberately does not move; frame 13 changes shape, its center sinks 3.6 pixels, and it lasts a single frame.

Why most falling frames sit up high

Open the diagram full size

In this free-fall model, the ball’s distance below the top is 2 × n² pixels, where n counts the frames since the top. The gaps between frames go 2, 6, 10 and on up to 42 pixels, each one 4 pixels wider than the last. That steady growth is constant acceleration, translated into spacing.

The halfway mark is 144 pixels down. Frames 1 to 9 all sit above it, and only frames 10 to 12 sit below. In time, the top half of the drop takes about 0.71 seconds and the bottom half about 0.29 seconds, so in this model a falling ball spends most of its drawings in the region where it moves slowest.

Animators call this bunching of drawings near a pose slow in and slow out. The ball eases out of the top as it falls and eases back into it as it rises, but it gets no easing at the floor, where the gaps are widest. The 12 principles of animation page shows the same bunching on a move between two poses.

Download the bouncing ball frame data (CSV) · source and license notes

Even spacing: the same drop without the fall

Free-fall spacing against even spacing

Every frame, side by side

Free-fall spacing

1. 1top
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13squash
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

Even spacing

1. 1top
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13squash
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

Both balls in this pair start at the same top position and squash on the same floor in frame 13, so only the spacing differs. The left ball follows the free-fall gaps, while the right ball drops 24 pixels a frame on its way to the touch: 288 pixels split into 12 equal steps.

At full speed the even ball looks lowered and lifted rather than dropped, and it reverses direction at the top as abruptly as at the floor. Between frames 24, 1 and 2 it moves 24 pixels up and then 24 down, where the free-fall ball moves 2 up and 2 down. Only 6 of its 12 falling frames sit above halfway, against 9 for the free-fall ball.

Drawing a bounce that travels

Illustration

The loops above bounce in place, which keeps the vertical spacing easy to compare. To send the ball across the screen, the same model gives a short recipe:

1. Pick the frame count and rate first. This loop uses 24 frames at 12 frames per second.
2. Place the two key positions: the top, and the touch on the floor.
3. Space the falling frames so that each gap is a fixed amount wider than the last. In this model that amount is 4 pixels.
4. Mirror the falling frames for the climb, so the top is reached as gently as it was left.
5. Add one squash frame on the floor, keeping the ball’s area about the same.
6. Move the ball the same sideways distance in every frame.

Even sideways steps plus growing vertical gaps trace an arch, with the drawings crowded near each peak. In a hand-drawn film such as Gertie the Dinosaur, each of those positions has to be drawn on paper. A comic strip has no frame rate at all, yet Dream of the Rarebit Fiend still has to show how far things move from one panel to the next.

Checking the seam

Open the diagram full size

A short loop repeats every mistake on each pass, and the seam is an easy place for a spacing mistake to hide. Here the last two frames climb 6 pixels and then 2, frame 1 is the top, and frame 2 drops 2 pixels again. Read backward, the seam is the opening strip: 8, 2 and 0 on the way up, then 0, 2 and 8 on the way down.

Across the seam, each step differs from the one before by 4 pixels, the same as everywhere else in the flight. Frame 24 is not a copy of frame 1, so the ball never stalls at the top of this model.