12 Principles of Animation

Simple animation has been on my mind for a number of months as I’ve been thinking about animated GIFs. One of the rabbit trails I’ve followed while exploring the GIF topic has been these 12 Principles of Animation. These principles had been formalized by the animators at Walt Disney, in the 1930s, as guidelines for creating convincing movement. Of course, these principles were created in the context of hand-drawn animation, but it turns out that they can be applied to digital animation as well. When these principles are applied well, animated characters are not only convincingly more “real” in movement, but they can take on personalities and emote effectively. Viewers are more likely to make a connection with these characters. Considering this, does deliberately capturing these moments that exemplify one or some of the 12 Principles in part of a shorter animation (let’s say an animated GIF) make for a more interesting composition in the shortened clip – as opposed to simply pulling out a few moments as reference. Not being formally trained in animation, I find The Principles fascinating, so I took some time to explore the principles and to find examples where I think they have been well executed in pop culture.

Listed below are the principles, taken from https://minyos.its.rmit.edu.au/~rpyjp/a_notes/anim_principles.html where you can read more about the principles themselves.

  1. Squash and Stretch: Road Runner and Wile E Coyote
    squash-and-stretch-o
    (https://www.youtube.com/watch?v=qWdFIXn2Mdo), 6:35 – 6: 45
  2. Anticipation: Despicable Me
    anticipation
    (https://www.youtube.com/watch?v=PZESMK-UC48), 0:41 – 0:51
  3. Staging: Pigeon Impossible
    pigeon-impossible-staging-o
    (https://www.youtube.com/watch?v=dWVJZ-QSinM), 01:10:00 – 01:20:00
  4. Straight Ahead and Pose to Pose Animation:
    Straight Ahead (Frame to Frame) Example
    straight-ahead-o(https://www.youtube.com/watch?v=5T4wvZiyWoA),
    Pose to Pose (Keyframe) Example ()
  5. Follow Through and Overlapping Action:
  6. Slow Out and Slow: In For the Birds
    Slow In/Slow Out - For the Birds
    (https://www.youtube.com/watch?v=e70NIYIfiTc), 01:30:00 – 01:40:00
  7. Arcs: Ice Age
    arcs
    (https://www.youtube.com/watch?v=tXVtmYFDGHw), 00:19:00 – 00:29:00
  8. Secondary Action: Scrat Ice Age Intro
    secondary action
    (https://www.youtube.com/watch?v=L02XRHbqSE4), 00:39:00 – 00:49:00
  9. Timing:
  10. Exaggeration:
  11. Solid Drawing:
  12. Appeal:

While thinking about these fundamental principles I wondered what research has to say about animation and learning. It turns out quite a bit has been said, but the application of animation and the different contexts in which it can be applied in really makes a comparison of research a . I found an interesting chapter titled The Animation and Interactivity Principles in Multimedia Leaning, by Mireille Betrancourt, in the Cambridge Handbook of Multimedia Learning. In the chapter she takes a summary look at past research and findings with regard to animation in a learning context.

Really, there isn’t anything shocking that is said in the chapter, but I found it useful to see how people have attempted to formalize their evaluation of animation as learning tools. I found it interesting to see how animation has been characterized for analysis on three different levels, technical, semiotic, and psychological. Two distinct types of animation are defined, the animated image and animation that allows for control (simulation) and interactivity. Three particular justifications for using animation for learning are also presented, all which answer the questions, “When and how should animation be used to improve learning?”:

  1. Supporting the visualization and mental representation process
  2. Producing a cognitive conflict
  3. Enabling learners to explore a phenomenon

The big question is why animation might be effective over a static image. The chapter goes on and expound on cases where research has shown that animation hasn’t added much to the learning experience for students. The exception has been in cases where the learner has been given simple speed and playback control, the overall conclusions are that animations are not adding much to the experience of learners in a general context. The end of the chapter proposes 5 design principles for incorporating animation into learning materials when appropriate. These 5 considerations mare the most useful portion of the entire chapter.

  1. Apprehension principle
  2. Congruence principle
  3. Interactivity principle
  4. Attention-guiding principle
  5. Learner control

Update:

There’s a great video on Vimeo that demonstrates the principles well: