The Principles of Animation

This post will deal with the 12 principles of animation. It started out as jargon between animators at the Disney studio. As they talked about their work with each other more and more, some terminology was created or assigned new meanings to facilitate this process. After continuously searching for better names and methods, they eventually perfected it into these 12 principles. (cf. Thomas 1995: 48)

1. Squash and Stretch

This term was coined by the idea that most things, while progressing through an action, show some kind of movement in their shape, as little things are rigid enough not to do so. They define squashed as flattened or bunched up and stretched as an extended condition. It was important not to exaggerate to prevent the drawings from looking bloated or stringy. A half-filled flour sack was used as reference and bent into all kinds of shapes, while keeping its original volume. Various newspaper photos of people doing different kinds of sports were also referenced, as they showed their bodies and faces in most unusual and extreme situations. (cf. Thomas 1995: 48ff)

Figure 1: A squashed character

2. Anticipation

This was based on the idea that animation should visually lead the audience from one sequence to the next. Each important action should have a small preceding action which hints at what is to come. Without it, the audience can become nervous and unsure. Especially early animation was often abrupt and jagged, which is why Walt Disney wanted to correct that. (cf. Thomas 1995: 52ff)

Figure 2: An anticipation

3. Staging

Staging is one of the broadest terms on this list. Characters and action need to be staged for them to come across as intended and be properly understood. As soon as a story point has been decided on, it needs to be properly catered towards. The action must be properly seen, the framing needs to guide attention properly and there should be no other distractions from what is to be shown at any point. Walt also wanted everyone to work in silhouettes, in order to facilitate staging things properly. (cf. Thomas 1995: 54ff)

Figure 3: A staged character

4. Straight Ahead Action and Pose to Pose

These are the two types approaches to animation. Straight Ahead Action means that the animator simply starts drawing and draws frame after frame, letting their creativity flow, getting new ideas along the way. The overall goal and action are obviously clear from the beginning, however this approach is more creative and can lead to more spontaneous results.

The second approach, Pose to Pose is more planned out. As the name suggests, the key poses of a scene are drawn first. This way more time is spent on these key poses, giving more control and opportunity to refine.

Both these methods offer their own unique advantages, which is why they are both still in use. (cf. Thomas 1995: 57ff)

Figure 4: A main pose

5. Follow Through and Overlapping Action

Whenever a character stopped moving it looked unnatural and abrupt. Consequently, Walt Disney knew that not all things come to a halt at the same time and defined a few basic rules.

1. After the figure has stopped, appendages such as a tail or big ears continue to move according to their weight.

2. The body does not move as one. When one element has already stopped, another can still be in movement.

3. Skeletal parts will move faster than loose parts.

4. The aftermath of an action can be more interesting than the action itself. A swing of a bat will be over in a second, but what that swing causes to the one swinging or anybody around can be shown in the following seconds.

5. Lastly, the Moving Hold is when a distinct pose is kept on screen for 8 to 16 frames to allow the audience to take in what had happened. To keep such a long wait from being boring, the pose that was kept was drawn a second time, but slightly more exaggerated. While holding the initial pose, the character gradually moved towards the second version. (cf. Thomas 1995: 60ff)

Figure 5: Action

6. Slow In and Slow Out

The established key poses were the hero of the animation, while the frames in between were just a way of getting there. This is why everything close to and around a key pose was slower and held on screen longer than the in-betweens.(cf. Thomas 1995: 63)

7. Arcs

This states that in living organisms, most movements will, in one way or another, describe an arc. With this principle, animation broke free from its stiff and rigid nature. It described how a character would arc into their steps, or how even the fist in a straight punch follows an arc during its wind-up. Such action is only visible in in-betweens, since only key frames have no way of showing their relative movement. (cf. Thomas 1995: 63ff)

Figure 6: An action arc

8. Secondary Action

A secondary action supports what the main action is trying to convey. It should never be too weak nor too strong, as not to be inconsequential or overpower the main action. These are things such as a tear dropping or a small change in expression. This also needs to be timed with main movement and action, since a subtle change during one of those times would easily go unnoticed. (cf. Thomas 1995: 64ff)

9. Timing

The time an action takes is of course directly proportional to its number of drawings. Depending on the complexity of these drawings, they might need more or less screen time. The same action can also be interpreted differently based on how many in-betweens are drawn, and therefore the speed at which the action completes. This can range from being hit by a brick to stretching a sore muscle. (cf. Thomas 1995: 65f)

Figure 7: Impact and timing

10. Exaggeration

Walt Disney always wanted characters and their actions to be as exaggerated as possible. Bringing across as much as possible through the way they and their actions were drawn was what he called “realism,” as it felt more real, more convincing.(cf. Thomas 1995: 66f)

Figure 8: An exaggerated character

11. Solid Drawing

This simply meant that animators should understand the basics of drawing. With these basics in mind, repeating all steps needed to produce animation is much easier to achieve. (cf. Thomas 1995: 67f)

12. Appeal

Be it a hero or a villainess, the eye of the audience needs to be drawn and what they see should have appeal. This makes people want to watch, want to know more about characters. There were many things that, according to Walt Disney, made something lack appeal. A weak drawing, clumsy shapes, poor design. With this appeal they tried to communicate feelings through lines. (cf. Thomas 1995: 69f)

Sources

(1) Thomas, Frank/Ollie Johnston (1995): The ILLUSION OF LIFE: DISNEY ANIMATION, USA: Abbeville Press

Image Sources

Figure 1: Thomas 1995: 49

Figure 2: Thomas 1995: 53

Figure 3: Thomas 1995: 55

Figure 4: Thomas 1995: 58

Figure 5: Thomas 1995: 62

Figure 6: Thomas 1995: 63

Figure 7: Thomas 1995: 65

Figure 8: Thomas 1995: 67

The History of Animation

This post offers a summary of the history of animation and its different approaches and forms. What some call the earliest attempts at animation date back all the way to Grecian pottery, for its sequential drawings of movement and expressions, similar to single frames of a video. However, tools capable of actually producing what can be considered moving images did not exist until 1603, with the invention of the magic lantern. (cf. Masterclass 2021)

The Magic Lantern is believed to have been invented by Christiaan Huygens. Its use of candlelight in combination with illustrations on glass sheets made it the earliest form of a slide projector. These glass sheets were moved individually to project the first moving images. (cf. Magic Lantern Society)

Figure 1: A magic lantern

The Thaumatrope, introduced in the 18th century, was a disk with a picture on either side, held by two strings. Twirling and releasing these strings would spin the disk, showing what looked like both sides combined, caused by the phenomenon of persistence of vision. (cf. Masterclass 2021)

Figure 2: A Thaumatrope

What is considered one of the first commercially successful devices is the Phenakistoscope, invented in 1832. It consisted of a flat painted cardboard disk that created the illusion of movement when spun (cf. Kehr, 2022), much like the sequential drawings of the aforementioned Grecian pottery.

Figure 3: A Phenakistoscope

The Zoetrope was the successor of the Phenakistoscope. It was based on the same principle as its predecessor, however it now came in cylindrical shape with small slits to look through, allowing multiple users to enjoy it at the same time. (cf. Masterclass 2021)

Figure 4: A Zoetrope

A different approach was taken with the Kineograph from 1868. It is also known as the flipbook, as it is a small book of again, sequential drawings, each page adding to movement of the previous one. Flipping through the pages quickly then resulted in a small animated scene. (cf. Masterclass 2021)

Figure 5: A Kineograph

In 1876, the Zoetrope was improved upon again with the invention of the Praxinoscope. Émile Reynaud replaced the narrow slits with a mirror construction, allowing for a clearer and easier viewing experience by projecting it before an audience. (cf. Kehr, 2022)

Figure 6: A Praxinoscope

All these early methods of animation even predate cinematography and film. Animation as we commonly understand it today is however intertwined with video. Although a clear first animated film ever is hard to establish and opinions differ, Émile Reynaud’s Pauvre Pierrot from 1892 is a good contender. It was the first to use a picture roll of only hand painted images instead of photographs. (cf. Masterclass 2021) Others that can lay claim to this title are J. Stuart Blackton with Humurous Phases of Funny Faces in 1906 or Émile Cohl with the creation of his animated protagonist in Fantasmagorie in 1908. (cf. Pallant 2011: 14)

Figure 7: A frame of Pauvre Pierrot

The basic principles established by these first works would then be built and improved upon in the upcoming years. Character animation was taken to a new level by Winsor McCay’s Gertie the Dinosaur in 1914, while John Randolph Bray released what is believe to be the first commercial cartoon in 1913 with Colonel Heeza Liar in Africa. This release was also the reason for the first cartoon serialisation. Not only series such as Felix the Cat (1919) profited from this established idea of a series of cartoons, but also Disney with its early works such as Mickey Mouse (1928) and the Silly Symphonies (1929) benefitted greatly from this. (cf. Pallant 2011: 14f)

Figure 8: A frame of Gertie the Dinosaur

A few years later Disney produced the first full-length animated feature film with Snow White and the Seven Dwarfs (1937). It used traditional animation on a piece of transparent celluloid: Cel animation. This enabled artists to transfer parts between frames that were not moving. This greatly reduced the time of production, since every new frame did not have to be drawn from scratch, allowing background and other parts to be reused. (cf. Masterclass 2021)

Around the same time, people began to experiment with animated computer graphics. Using custom devices and mathematics, John Whitney Sr. was able to produce precise lines and shapes on screen. This eventually led to him animating the opening sequence for the 1958 film Vertigo, making it arguably the first to use computer animation. (cf. Masterclass 2021)

Figure 9: The opening visuals for Vertigo (1958)

In 1972, Edwin Catmull was only a student at the University of Utah when he created the world’s first 3D rendered film with his colleague Frederic Parke. It was constructed by scanning a mould of Edwin’s hand. This data was then traced by an analogue computer. (cf. HistoryOfInformation) Edwin would then continue to expand his knowledge and found Pixar Animation Studios. With Pixar, he released the first fully computer animated full-length film with Toy Story (1995) (cf. Kehr, 2022) This has fully paved the way for computer generated graphics to expand and continue to develop until today.

Sources

(1) Masterclass (2021): A Guide to the History of Animation [online] https://www.masterclass.com/articles/a-guide-to-the-history-of-animation [accessed on 13.01.2023]

(2) Magic Lantern Society (n.d.): About Magic Lanterns [online] https://www.magiclanternsociety.org/about-magic-lanterns/ [accessed on 13.01.2023]

(3) Kehr, Dave [Britannica] (2022): Animation [online] https://www.britannica.com/art/animation [accessed on 13.01.2023]

(4) Pallant, Chris (2011): Demystifying Disney: A History of Disney Feature Animation, New York, USA: Continuum

(5) HistoryOfInformation (n.d.): The First 3D Rendered Movie [online] https://www.historyofinformation.com/detail.php?entryid=4015 [accessed on 13.01.2023]

Figure Sources

Figure 1: Magic Lantern Society [n.d.]: Lantern Types [online] https://www.magiclanternsociety.org/about-magic-lanterns/lantern-types/ [accessed on 14.01.2023]

Figure 2: Musa, Sajid/Rushan Ziatdinov/Carol Griffiths (2013): Introduction to computer animation and its possible educational applications: 177

Figure 3: Phenakistoscope (n.d): Phenakistoscope [online] https://commons.wikimedia.org/wiki/File:Phenakistoscope_3g07690u.jpg [accessed on 14.01.2023]

Figure 4: Zoetrope (n.d): Zoetrope [online] https://commons.wikimedia.org/wiki/File:Zoetrope.jpg [accessed on 14.01.2023]

Figure 5: Kineograph (n.d): Kineograph [online] https://commons.wikimedia.org/wiki/File:Linnet_kineograph_1886.jpg [accessed on 14.01.2023]

Figure 6: Praxinoscope (n.d): Praxinoscope [online] https://commons.wikimedia.org/wiki/File:Lanature1882_praxinoscope_projection_reynaud.png [accessed on 14.01.2023]

Figure 7: Pauvre Pierrot (n.d): Pauvre Pierrot [online] https://commons.wikimedia.org/wiki/File:Pauvre_Pierrot.png [accessed on 14.01.2023]

Figure 7: Gertie the Dinosaur (n.d): Gertie the Dinosaur [online] https://commons.wikimedia.org/wiki/File:Gertie_the_Dinosaur_(retouched_frame).jpg [accessed on 14.01.2023]

Figure 8: Bernard Hermann (2021): Promotional Tweet [online] https://twitter.com/HerrmannMovie/status/1408907170029182976/photo/1 [accessed on 14.01.2023]

Character Animation? 3D Shader?

Before the actual research process I started with a small dump of questions that could further define my possible areas of interest. This first post is supposed to serve as an orientation session, finding ways to further develop my skills and reach for new content in different directions. While following my mental path of questions about character animation, I discovered another interesting topic: 3D shaders and different ways of stylisation. Here are the questions i came up with.

Animation:

State of the art analysis: Which animation studios are currently most present?
How do big animation studios animate? Do they have their own style?
What is the difference between 2D and 3D animation?
What are the main differences between character animation vs. facial animation practices?
What are the established workflows? Key poses, in-betweens, animation smears and stretches, dynamics
How can the animation principles be applied in character and facial animation?
What extra steps are needed to animate for video games? Animation loops / idle animation
How is work departmentalised / what is the pipeline in big studios?
Which tools does the industry use to animate?
How is such work possible as an individual? Which tools can be used, what helps facilitate the workflow?
How can motion capture be used to help get quicker results than with manual keyframe animation?

Shaders:

How do material shaders work in 3D?
In which style can a 3D piece be displayed?
How can shaders influence these styles? 3D vs 2D shaders
How can shaders be used to achieve certain styles? 90’s anime look / Arcane style / hand-painted look / watercolour / toon shader

Examples

Here I collected some example links, visualising what I thought of and found in this process.

https://80.lv/articles/an-unusual-method-of-creating-character-animations-for-games/
https://80.lv/articles/an-old-school-anime-style-animation-made-in-blender/
https://80.lv/articles/an-animator-shows-a-fun-way-to-work-with-dynamics-poses/
https://80.lv/articles/the-first-episode-of-the-behind-the-scenes-documentary-on-arcane/
https://80.lv/articles/work-in-progress-combat-animation-made-in-blender/
https://80.lv/articles/a-porco-rosso-inspired-animation-made-in-blender/

Possible Literature / References

This is a collection of works that can serve as a good foundation for research in the future.

Pallant, C. and Holliday, C. (2020) Snow White and the seven dwarfs. First edition..

Williams, R. (2009) The animator’s survival kit : [a manual of methods, principles and formulas, for classical, computer, games, stop motion and internet animators]. expanded ed.; 1. publ..

Primig, L. (2015) Rigging cartoony characters : am Beispiel des animierten Kurzfilms “The Rainbowmaker”

Schantl, D. (2013) Disney character animation : considering the example of Snow White and the seven dwarfs.

Wretschko, Bettina. 3D Character Animation : von der Idee bis zur Bewegung. 2015.