12 Principles of Animation: Lutz’s 1920 Rule for In-Betweens

Open the diagram full size

Page 180 of Lutz’s Animated Cartoons asks how many drawings a movement needs, and answers with a count. For a swift action in a humorous cartoon, E. G. Lutz allowed a single position halfway between the two extreme drawings, but a slower action “should have at least three positions between the extremes”. His how-to book was published in 1920. The diagram above counts both cases as dots, using the numbers printed beside his drawings: 1, 2, 3 and 1, 1½, 2, 2½, 3.

The 12 principles of animation are a later list of twelve working rules, named in Frank Thomas and Ollie Johnston’s 1981 book Disney Animation: The Illusion of Life. Lutz’s rule fits under one name on that list, timing, which decides how many drawings a movement receives. This page demonstrates a second name, slow in and slow out, which decides where those drawings are placed.

Slow in and slow out against even spacing

Even spacing against slow in and slow out

Every frame, side by side

Even spacing

1. 1extreme
2. 2held
3. 3held
4. 4held
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16extreme
17. 17held
18. 18held
19. 19held
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30

Slow in and slow out

1. 1extreme
2. 2held
3. 3held
4. 4held
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16extreme
17. 17held
18. 18held
19. 19held
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30

Both dots travel 360 pixels from extreme A to extreme B and back, in 30 frames at 12 frames per second. Each frame lasts about 83 milliseconds, so one loop takes 2.5 seconds. Each move uses 11 in-betweens, the drawings that fill the gap between two extremes, and lasts 12 frames, or 1 second.

Between the holds, the even-spacing dot moves 30 pixels every frame, so it starts and stops at full speed, as if each end were a wall it bumps into. The slow-in-and-slow-out dot leaves A with a step of 5 pixels, builds to 51 in the middle, then closes on B with steps of 15 and 5.

Illustration

That bunching of drawings near each extreme is slow in and slow out: the movement eases out of one pose and gradually settles into the next. Played at full speed, the ends of the slow-in-and-slow-out dot’s move look soft. The even-spacing dot’s ends look abrupt.

Where the in-betweens sit

Open the diagram full size

Lay both moves along a ruler and the difference is easy to count. Mark a point a quarter of the way in from each end, 90 pixels from the extreme. The even move places 4 of its 11 in-betweens inside those outer quarters, with 2 more exactly on the marks, while the eased move places 8 there, 4 at each end.

The eased positions come from a mathematical curve rather than from placing dots by eye. The curve is a cubic Bézier with control points (0.42, 0) and (0.58, 1), the value that the W3C document CSS Easing Functions Level 1 gives for the keyword ease-in-out. For in-between k, this page reads the curve at k/12 of the move’s time and rounds the result to a whole pixel.

Curve values from CSS Easing Functions Level 1, W3C Candidate Recommendation Draft, 13 February 2023. Copyright © 2023 World Wide Web Consortium. W3C Document License.

Download the slow in and slow out spacing (CSV) · source and license notes Data: Easing curve values cubic-bezier(0.42, 0, 0.58, 1) from CSS Easing Functions Level 1, W3C Candidate Recommendation Draft, 13 February 2023, https://www.w3.org/TR/css-easing-1/. Copyright © 2023 World Wide Web Consortium. https://www.w3.org/copyright/document-license-2023/

The held frame

Open the diagram full size

Frames 1 to 4 of the loop all show the dot at extreme A, and frames 16 to 19 all show it at extreme B. Frames 1 and 16 are the extremes, and the three frames following each one are identical copies. This site calls each copy the held frame: the frame in a loop that deliberately does not move, because a motion often reads through the time it stays still.

Each extreme stays on screen for a third of a second. Both loops use exactly the same holds, so the only difference between them is the spacing. A still frame can also turn up by accident. On the card discussed in The Horse in Motion, in frame 12 the mare appears to stand, and a gallop loop that kept it would stop dead for one frame.

The seam, where the last frame runs back into the first, is the place to check a loop for a stutter. In the eased loop, frame 30 sits 5 pixels from A, frame 1 lands on A and frames 2 to 4 hold. The even dot arrives with a full 30-pixel step and stops immediately. No step anywhere in the eased loop is larger than 51 pixels, the middle of each move.

A 1920 rule for in-betweens

Lutz used the word in-between one page before the rule. A caption on page 179 says that for some quick actions, “in-between” drawings can be slighted, meaning drawn more roughly than the others. Page 180 then takes up how many drawings a movement needs, using the example of a hand that travels from the thigh to the head and then touches the brim of a hat.

Open the diagram full size

The count becomes time once each drawing is shown for a set number of frames. The rule itself names no frame rate. At this page’s 12 frames per second, with one frame per drawing, the quick version takes 2 steps, about 0.17 seconds. The slower version takes 4 steps, about 0.33 seconds.

Lutz did not treat three as a ceiling. At the foot of page 180 he added that a skilled animator does not much mind whether he makes “three, five, or even more” drawings between the extremes. The passage counts drawings and does not discuss where to place them, which is the separate idea this page’s loop shows. In a hand-drawn film such as Gertie the Dinosaur, each added position is one more drawing to make.

The same book turns to dialogue a few pages earlier. On page 174 Lutz describes balloons as the outlines that carry the characters’ words on screen, a device covered under speech bubbles.

The twelve names, and which ones a loop can show

Open the diagram full size

Thomas and Johnston’s list has twelve names. The table gives each one with a short description written for this site, not taken from the book, and how this site shows it. Five of the twelve concern staging, acting, drawing skill or design, and this site does not try to show them with a loop of plain shapes.

Straight ahead and pose to pose describe how drawings get made, so this site shows them as working steps. Straight ahead draws positions 1 to 5 in order. Pose to pose draws both extremes first, then the middle, then the two gaps. The half numbers in Lutz’s example, 1½ and 2½, name each added drawing by the two it falls between.

John Lasseter’s 1987 SIGGRAPH paper described the principles of traditional hand-drawn animation and applied them to 3D computer animation. Squash is worked through on the bouncing ball animation page.

Download the twelve principles list (CSV) · source and license notes