MODULE 1 - THE 12 PRINCIPLES OF ANIMATION

In this shorter first module, we are going to be starting with the 12 Principles of Animation, a set of fundamentals outlined by Disney animators Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. These animators helped pioneer narrative animation at the Walt Disney Animation Studio, and these principles are well-known and well-regarded in the contemporary animation industry.

Even those these were established before the use of digital animation (both 2D and 3D) and applied to hand-drawn frame animation, they are still incredibly useful and relevant to all animation formats, and in many cases, I’d argue that they are even more important to consider when working with digital animation processes that can be somewhat automated, in order to infuse these animations with a sense of life and personality.

This will be one of the only times throughout the quarter that we focus on Disney Animation - there is a lot to consider with Disney as a corporation and before that as an animation studio, especially in terms of inclusivity, representation and their appropriation of different cultural stories and narratives, and I try to focus on more independent animators and animations as a counter to what is mainstream and widely distributed. That being said, in an animation course, it is also important to present the core fundamentals and practices that are known and utilized in the field, and to credit the authors of these practices.

Below I introduce each of the 12 principles and how they might be understood or used within the context of the course. I have also included two additional resources to view for this lecture content, a short animation with great examples of these 12 principles, and a link to a short summary of these 12 principles that is published directly by Disney, and uses specific examples of each from Disney films. There are many articles and other resources about these 12 principles available on the internet, but I believe the Disney authored one is probably the most true to the original source material.

All of the GIF examples below, and the complete animation are created by animator and designer Cento Lodigiani

1. Squash and Stretch

This is the illusion that gives weight and flex to an animated object. It can be used to create contrast between rigid subjects and more flexible subjects - living subjects usually convey a sense of flexibility and kinetic movement.

In this course, this will be a principle that will be interesting to play with in our kinetic text module, where you will be animating letters, words, and phrases - what kind of different structures might different letters and words have, and how can that be conveyed through movement and interaction?

2. Anticipation

Anticipation to a critical event or movement in an animation can be built by including smaller movements in the lead up to that moment of action.

This can be utilized in most of the studio projects for this course, including the stop-motion + the kinetic text projects. Before a meaningful transition or transformation happens, the subjects can start with smaller, more subtle movements.

3. Staging

This is the idea that where the animated subject is placed within the frame, and how it is posed and situated, especially in relation to other subjects, conveys a specific meaning to the audience.

Framing is very important with stop-motion animation - think of each frame as a photograph (which it is) and where the subject is placed within the frame, the angle of the camera, the background and foreground elements, lighting, etc, all impact the visual meaning of each photo/frame. This fundamental is also important with rotoscoping, where the camera movement and placement can change the entire visual affect of whatever video you are turning into an animation (we will cover Stop-Motion and Rotoscoping in Module 4)

4. Straight Ahead and Pose to Pose

These two terms and principles address the animation process itself. Straight ahead animation is when the animator draws with frame 1, then goes to frame 2, frame 3, frame 4, etc. Pose to pose animation is when the animator draws a starting pose, and ending pose, and then creates the frames in between.

Pose to pose animation is essentially Keyframe Animation or Tweening Animation, two digital techniques that we will introduce in Module 3. After Effects is, at its core, a keyframe-based program, even though it has a lot of other capabilities and features on top of the keyframe basis.

Straight ahead animation can be more fluid, but it can be more challenging to be precise with timing and movements within the frame. This will be a process you can experiment with in the Module 2 Studio Project.

5. Follow through and overlapping action

This is a fundamental that treats animated subjects like their-real world counterparts, where an object in motion will have multiple components in motion unless it is COMPLETELY rigid. Even a boulder rolling down a hill will have small pieces of boulder flying / bouncing off it in different direction, and will also probably impact the surface it is rolling on.

This can be a difficult element to work with when starting with animation, especially stop-motion, as it involves a sense of physics and dynamics. For this reason, I have found rotoscoping very useful in understanding follow-through and overlapping action, as the technique (usually) bases animation frames directly on recorded video of real-world subjects in motion.

6. Slow-in and Slow-Out

This is technique that works with the technology of aesthetics of frame animation to achieve more life-like movements. Animators will add more frames / detail to animated subjects at the beginning and end of an action or movement, and will use less frames in between - this is because our eyes / brains will “fill in” those in between frames once they are given start and end cues. Its weird! But its a real thing!

Keyframe animation programs like After Effects and Blender use a similar automated process called Ease-in / Ease out, which I will introduce in Module 3 and Module 5.

7. Arc

In this reality, objects - both living and non living - tend to move along arcs and curves. I think this has to do with gravity and physics and also fluid-dynamics, since most living subjects are relatively flexible and dynamically structured. Please don’t fact-check this with any engineering faculty.

After Effects and other keyframe animation programs allow you to draw “motion-paths”, which subjects can move along. The default option for these paths are “bezier-curves” - its interesting to play with the contrast between these slightly curved paths and totally angular paths. There will be many opportunities to experiment with this type of movement in Module 3.

8. Secondary Action

This is very similar to the idea of overlapping-action and follow through. I tend to think of it as a bit between physics and involuntary (overlapping action) and personality and voluntary (secondary action). This could include the eye movements of a subject as they performing another more visible action.

This type of movement is another detail that can be very impactful, but harder to incorporate when first working with animation. Studying subjects from life can be very helpful with developing this type of motion-capture. This might be a detail that can be included in the animatics and narrative animations created for Module 5.

9. Timing

Timing is crucial in creating an animated space that makes sense to the viewer. If everything moves at the same pace, it is hard to establish if that pace is fast or slow. When trying to create a sense of speed in an animation, contrast is helpful, as is working with the framing and number of in between frames a moving subject covers from one location in the frame to another. A subject that covers more distance and motion in less frames will appear to be moving faster than a subject that covers less distance and movement in the same number of frames.

This concept will be especially helpful to consider with the stop-motion projects in Module 4. Module 5 will cover parallax effects, which are another way of creating the illusion of different speeds as well as depth.

10. Exaggeration

Exaggeration is the strategy of grounding impossible movements, expressions and transformations in real-world physics. When these impossible actions are slightly anchored to something that could happen, they can appear much more convincing and possible.

This is an option to explore with the rotoscope project in Module 4. Rotoscopes are based off of video, but can be exaggerated and abstracted in the rotoscoping process. This can allow for compelling animations that are totally impossible, but still tethered to something from real life as a guide. There will be several examples of this fundamental in the rotoscoping lecture module as well.

11. Solid Drawings

Traditional frame animations are 2D, as are digital 2D animation, and even 3D animations are most typically output into a flat, 2D screen. For these reasons, it is important to visualize 2D subjects as if they have weight and exist in a 3D space.

This is a very interesting concept to consider with animated text and UX/UI animations (which we will discuss a bit in Module 3 as well). Text is something that is mostly 2D even in a 3D space, and interface components - such as buttons, icons, banners, scroll bars and images - are now more typically designed to appear “flat” (as opposed to the early iOS designs where every buttons and icon had a beveled, shaded corners, highlights and a drop-shadow).

12. Appeal

According to the original authors, this principle states that animators should seek out to create images that captivate the viewer. I challenge this fundamental the most, as I believe that something that is well-animated inherently forms a meaningful connection with the viewer. This illusion can feel powerful, appealing, cute, frightening, eerie, magical, heartwarming, unsettling, etc - and this is where there exists great potential for creating meaningful and engaging artworks using animations.

Keep this potential in mind throughout the quarter. How much emotion, meaning and personality can you evoke via mere movement and action, even when using simple shapes, or text, or everyday objects as animated subjects.

DISNEY’S 12 PRINCIPLES OF ANIMATION

https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/

Once finished reviewing this lecture content - including the linked list above - complete the Module 1 Lecture Review and Module 1 Participation Credit Assignments.