ANIMATION NCII – Animation 12a

Governor Pack Road, Baguio City, Philippines 2600

Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

12 PRINCIPLES OF ANIMATION

Objectives: At the end of this lesson, students shall be able to:

1) Enumerate all twelve principles of animation;
2) Explain how the mentioned principle is applied in animation; and
3) Identify the principle(s) used in a certain animation.

Introduction – 12 Principles of Animation

 Introduced by Ollie Johnston and Frank Thomas who were Disney animators
 Book reference: The Illusion of Life: Disney Animation (1981)
 Used to attain quality originally for traditional animation
o Specifically, these are the criteria to look out for while creating the animation on a
technical perspective (in-betweening, keyframing, etc.)
o Can also be applied for other animation styles (paperless, digital, 2D, 3D, stop motion, etc.)
 Purposes:
o Produce the illusion of characters in animation to adhere to the laws of physics
 It is understood that animated characters cannot attain the similar laws of physics
similar to live action or in real life
 Instead, the same laws of physics are used as a foundation to determine the physics in
the animation
o Focus on abstract issues such as emotional timing and character appeal
 Twelve Principles of Animation:
1. Staging 7. Exaggeration
2. Appeal 8. Arc
3. Pose-to-pose and straight ahead 9. Squash and stretch
animation 10. Secondary action
4. Timing 11. Follow through and overlapping
5. Slow in and slow out action
6. Anticipation 12. Solid drawing

NOTE: The original arrangement of the 12 principles in the book is quite different to what shall be
presented (original is squash and stretch, anticipation, staging, straight ahead and pose-to-pose
animation, follow through and overlapping action, slow in and slow out, arc, secondary action,
timing, exaggeration, solid drawing, and appeal). It is presented as such in accordance to what
the authors believed is the most important principle down to the least important.
The principles for this lesson have been arranged according to what the subject teacher
believes is the better arrangement (according to the animation workflow). Other experts and
professionals may have other arrangements as well. The arrangement is not necessarily
important, but it is important to know how each principle coincides with another.

Staging
 Presentation of an idea so that it is completely and unmistakably clear
 Directs the audience's attention to the story or idea being told
 How to present good staging:
1. Effective use of camera shots and angles
o Use of long, medium, or close up shots, as well as camera angles helps in telling a story
o Other angles could also be used

Page 1 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Common camera angles and shots (Examples are from the movie Zootopia):
a. Close-up – Character / subject is shot around the face or bust; used to convey the
emotion of the character; other variation: extreme close-up (tight shot on the face or its
portions)

b. Medium shot – Character / subject is shot until the torso; the most common type of shot;
used to show everything in the scene – including the characters and their expressions,
character action, and background; other variation: medium close-up (shot of the
character from head to chest), two shot (two characters are in a shot until their torso),
cowboy shot (shot of the character from the head to the mid-thighs)

c. Long / Wide shot – Character / subject is shot in full, with some focus on other elements
on the background; used to show the background and the interactions of the
character; other variation: full shot (better emphasis on the scenery rather than the
actions of the character)

d. Low angle – AKA worm’s eye view; character / subject is shot from a lower angle; shows
the power dynamic between the characters (subject and the camera) wherein the
subject tends to have the upper hand

Page 2 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

e. High angle – AKA bird’s eye view; character / subject is shot from a higher angle; shows
the power dynamic between the characters (subject and the camera) wherein the
subject tends to emit the feeling of superiority

f. Establishing – Variation of the high angle shot but for the scenery / location; head of the
scene that shows the location of the plot

g. Dutch angle / tilt – Character / subject is shot to an angle / one side; can create a
sense of disorientation; usually used for unclear memories or for tense scenes

h. Point-of-view (POV) – Subject is viewed according to how another character sees

them; used to transport the audience in the shoes of the character (in camera); other
variations: over-the-shoulder (subject is behind the shoulder of another character),
over-the-hip (subject from behind the hip of another character)

2. Pose or action and how to use it

o A pose or action should clearly communicate to the audience the attitude, mood,
reaction, or idea of the character
o The pose or action should relate to the story and continuity of the story line
o Do not confuse the audience with too many actions at once

Page 3 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Tips on a clear action and pose (Examples are from the show Avatar: The Last Airbender):
a. Make sure that there is a line of action – A line of action (light blue line) is an imaginary
curved line that runs through the body as it creates an action; Having this line present
makes the pose more dynamic and more well-defined

b. Action must be well-defined even as a silhouette – Silhouette is the action that is

illustrated in a solid color or through an outline only; used to determine if the action is
clear and defined; in the example, the extreme poses are still very clear with its
drawing, as well as what is happening (attack and dodging)

c. Avoid tangents – Tangents usually refer to two lines from two different objects in a
drawings touching at one point; these must be prevented as it causes spatial
ambiguity and may cause jarring when viewing it; it is recommended to have
overlapping lines and preventing them

Page 4 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

d. Avoid having too much action in one scene – Having multiple elements with different
actions happening may be okay in an illustration, because there is time to stop the
frame and analyze; this is also okay for real action, since shadowing and lighting is a big
thing to help distinguish depth; both of these things are not possible for animation as it
ultimately confuses the viewer

3. Background design and its use in the animation

o Care must be taken in background design so it does not obscure the animation or
compete with it due to excess detail behind the animation
o Background and animation should work together as a pictorial unit in a scene
o Example from “Space Ghost” utilizes hand-drawn animation for its main character, and
photographs for its background; does not help in the immersion of the character to the
background due to different styles

Appeal
 Live action character = charisma; animated character = appeal
 Prevent:
1. Weak drawing or design
2. Design that is complicated or hard to read
3. Clumsy shapes and awkward moves
 How to make an appealing character:
1. Use of basic shapes and proportions
o In Western animation, some of the characters and their personalities can be expressed
through how their bodies are created
 Height – typically, the taller the character, the more intimidating they can be
 Basic shapes (circle) – associated with cute, innocent characters
 Basic shapes (rectangle) – associated with bulky, strict characters
 Basic shapes (rectangle) – associated with more powerful / intimidating characters
Page 5 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Helps establish to the audience immediately of who that character is and some of its
personality whilst reducing the time needed for character building
 Be careful in doing this, as using different archetypes may categorize your character
and may give out negative connotations that may not be intentional
o Common archetypes:
a. Screwball – Characterized by a pear-shaped body, elongated head, long and
skinny neck, and big feet; tends to be more of the “smart aleck” type who outsmarts
other characters through their hilarious antics

b. Cute / baby – Characterized by a bigger head, small torso and limbs, huge eyes,
and bulging features; characteristics are very similar to that of an actual baby;
tends to have more of a shy / coy personality

Page 6 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

c. Goofy – Characterized by a long face, torso, and arms, short legs, big feet, small
eyes, long shoulders, hump back, and small head; tends to have a more laid-back
personality and does not have the best wit

d. Heavy / pugnacious – Characterized by a small head, big chest, small legs and feet,
and thick arms and proportions; tends to be more brawl and less brain; could also
be used for four-legged animals

2. Color
o Associating certain colors to characters in their design can emit a specific type of aura
o Examples:
a. Using certain colors could convey certain characteristics for the characters
 Red – passionate, hot-headed
Page 7 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Orange / Yellow – jolly, energetic

 Green / Blue – calm, relaxed
 Purple – royalty, maturity
 Pink – feminine
b. Using lighter / more vibrant colors for heroes and darker colors for villains (Snow
White’s dress uses vibrant and light colors like yellow and blue; the Evil Queen’s
colors and black and green)

c. Using certain colors could also determine the origin of the animation (Avatar: The
Last Airbender has a predominantly Asian influence; in Chinese / Japanese culture,
red is meant to be good whilst blue can mean evil)

d. In Japanese animation, a standout color style could determine if someone is a

pivotal character (Shokugeki no Soma)

3. Drawing and animation styles

o Different drawing and animation styles can cater to different audiences depending on
age, gender, geography, and others
o Referencing these styles would help in establishing the audience of choice
Page 8 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Examples:
a. Western animation caters more to Western audiences; Japanese animation caters
more to an Eastern audience (Persona 4 – Japanese v. Wonder Woman – Western)

b. Character designs on typical children’s cartoons and cartoons for adults (i.e. Adult
Swim) are different (Powerpuff Girls – children vs. Beavis and Butt-head – adults)

c. Shōnen is meant more for male audiences; shōjo is meant more for female ones

Straight ahead and Pose-to-Pose animation

 Process or approach on how an action is broken down and animated
 Pose-to-pose animation
 Animator plans the action, figuring out what drawings are needed to animate the scene
 Keyframes / extremes are drawn first

Page 9 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Two of the keyframes are taken and the action between is drawn (in-between frame)

 The frame that was just created is then turned into a breakdown (a form of a keyframe);
the first keyframe and the breakdown are taken and the action between them is drawn

 The same process of reassigning a breakdown and drawing the in-between is created
until the timing is satisfied
 Afterwards, the other extremes (keyframes 2 and 3) are taken and the action between
them is drawn

 The process is similarly continued until all of the frames are drawn
 Straight ahead animation
 Animator works straight ahead from the first drawing in the scene
 All of the frames are drawn according to the order that they appear, without much
notice of the actions after it

Page 10 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 The different animation processes have their own advantages and disadvantages, and
appropriate uses according to the circumstances
Pose-to-Pose Criteria Straight Ahead
Keyframes first; in-betweens later Process Draws from first to last frame
Results of the pose and timing Focus Creativity and spontaneity
Well thought-out actions with
Result Fresh and zany actions
better modelling
Animator must master the
Must create the keyframes first Requirement
modelling and action
Can result to awkward-looking
Does not allow room for creativity Weakness
poses; not for beginners

Timing
 Also known as the speed of an action
 Determined by the number of drawings it takes to create a certain movement
 Types of timing:
1. More drawings
o Results in a slower and smoother action
o Mostly seen in Western animation or animations with smoother movement
o Best used for a more dramatic effect (Example: Death Note)

GIF link: https://media1.tenor.com/images/65af00c0716b4c23fd6d78cc99f47cc3/tenor.gif

2. Fewer drawings
o Results in a faster and crisper action
o Mostly seen in Japanese animation
o Best used in fast-paced fighting / action scenes (Example: Sword of the Stranger)

GIF link: https://i.pinimg.com/originals/7b/be/db/7bbedbf65241043cb653a90ef32e02f0.gif

Page 11 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

3. Variety of slow and fast drawings

o Adds texture and interest
o Can be used in fighting / action scenes
o Generally used for exaggeration / emphasis of certain movements (Example: Avatar:
The Legend of Korra)

GIF link: http://images5.fanpop.com/image/photos/31100000/Korra-Tarrlok-match-avatar-the-

legend-of-korra-31128072-330-186.gif
 How it gives meaning to movement:
1. Projection of the idea
o Defines how well the idea will be received
o Without timing, all objects seems to fall within a vacuum, regardless of weight

GIF link: https://i.pinimg.com/originals/28/a1/42/28a142fcda7a56b86c784d9f27c4c6b8.gif

2. Weight
o Can help show how heavy an object is despite the similar sizes
o Can also show the resistance or how much friction there is being applied
o Can also show the kick or amount of energy is needed to gather before moving
o Can also show the impact of an object based on the force / weight used
o Heavier objects would have lesser drawings; lighter objects would have more drawings

GIF link: https://i2.wp.com/thinkinganimation.com/wp-

content/uploads/2016/06/tumblr_o7ve83HVr41s1ehaqo3_1280.gif
Page 12 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Slow-in and Slow-out

 Refers to the spacing of the in-between drawings between the extreme poses
 Variation of the timing, but focuses on more drawings
 Purposes:
1. Softens the action
2. Makes the action more life-like
3. Can help with emphasizing some of the actions necessary
 Variations:
1. Slow-in
o Also known as deceleration
o More drawings are seen at the end of the animation
o Speed becomes slower as time passes by

2. Slow-out
o Also known as acceleration
o More drawings are seen at the beginning of the animation
o Speed becomes faster as time passes by

3. Slow-in and slow-out

o More drawings are seen at the beginning and end of the animation
o A sizeable amount of animations can be seen with this type of timing

Page 13 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Anticipation
 Preparation of the action
o An action occurs in three parts: preparation, the action itself, and termination
 Helps indicate what is about to happen

 An action with little to no anticipation is not dynamic enough

GIF link:
https://static.dribbble.com/users/1636229/screenshots/9780482/media/e146cd1df9ad7d2714e63da686
e05038.gif

Exaggeration
 Caricature of facial features, expressions, poses, attitudes, and actions
o This is necessary because very subtle movements that is possible in live action may not
translate well with a typical, simplistic character design and it would not be properly seen
in the animation
 A character must move more broadly to look natural
o Not an extreme distortion of a drawing or extremely broad, violent action (Example:
Kakeguiri)

Page 14 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Action traced from live action film can be accurate but stiff and mechanical
o Rotoscoping – animation technique wherein video footage from real-life is used to
reference movement; movement is then traced / referenced into for animation (Example:
rotoscope – Attack on Titan characters; reference – This Love by Shinhwa)

o Rotoscoping is meant to be used as reference, and not to trace

o When using rotoscoping in animation, it is important to emphasize some movements more
to make it more obvious and it would not fade into the background
 How to properly exaggerate:
1. Curving of lines of action further (better to be used during in-betweens)

2. More exaggerated silhouette

3. Addition of animation smears / blurs

Page 15 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Examples:
1. Facial expressions

2. Poses

Arcs
 Slightly circular movement of all actions
o May have a few exceptions (ex: mechanical devices)

 Gives an animation a more natural action and better flow

 Helps create motion that is more expressive and less stiff than action along a straight path
 Examples:
1. Face movements

GIF Link: https://thumbs.gfycat.com/WickedEvilHartebeest-size_restricted.gif

Page 16 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

2. Face element movements (mouth)

3. Arm movements

Squash and Stretch

 Helps indicate the rigidity of an object during movement
o Most organic objects (people, plants, animals) have some level of flexibility in their shape
o Many real-world objects (furniture) have little flexibility
 Squash – Compression of an object

 Stretch – Expansion of an object

Page 17 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Uses:
o Dialogue

o Doing facial expressions

o Indicate body weight

o Show rigidity of an object

GIF Link: https://i.makeagif.com/media/7-27-2015/OjbZLX.gif

o Stretching is done before and after a squash

Page 18 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Secondary Action
 Action that results directly from another action
 Purposes:
o Heightens interest and adding a realistic complexity to the animation
o Adds to and enriches the main action
o Adds more dimension to the character animation, supplementing and/or re-enforcing the
main action
 Examples:
o Running – hair, clothing (skirt, ribbon, flap, keychain), arms moving in reverse of the legs
(from Hibike! Euphonium)

GIF Link: https://i.imgur.com/ML01adp.gif

o Throwing a ball – movement of the legs, movement of the other arm, head turn (from The
Simpsons)

GIF Link: https://i.gifer.com/3Kiq.gif

o Waiting for someone to call – tapping feet, arms around the face

GIF Link: http://www.dsource.in/sites/default/files/course/principles-animation/secondary-

action/images/05-mobile-pick-new-698.gif
Page 19 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Follow Through and Overlapping Action

 Extension of the secondary actions
 Follow Through
o Main body stops, other parts catch up following the path of action
o Nothing stops all at once
o Examples:
a. For this head turn, the jowls of the dog goes a bit forward before settling down to its
normal placement

b. For this run, when the man immediately stops, the coat goes a bit forward before
settling down to its normal placement

c. For this running down, the ears and tail of the dog still follow through even after the dog
has stopped, and then settles down to the normal position

 Overlapping action
o Main body changes direction while other parts continue forward, changes direction a
number of frames later
o Maintains a continual flow between whole phrases of actions

Page 20 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Examples:
a. For this jumping animation, you would notice that there is a delay with how the skirt
moves compared to the jump (i.e. in the first frame, the ball is gaining height while the
skirt is still in its normal position – facing down)

b. For the twirling animations, you would see that there is a delay with some of the
secondary actions (for the first photo, it’s the coat at the latter part of the animation; for
the second photo, the right pigtail is still facing backwards while the left one is already
facing forwards when it should have been at a straight line)

GIF Links: https://media1.tenor.com/images/c76b86b6ce863d686c857fb1c537ea60/tenor.gif

and https://i.imgur.com/a13rJhc.gif

Solid Drawing
 The way cartoons are drawn for reproduction of life
 Basic principles of drawing form, weight, volume solidity, and the illusion of three-
dimensionality to apply to animation as it does to academic drawing
 Transforming characters into color and movement to give the illusion of 3D and 4D life
o Three-dimensional movement – space
o Fourth dimension – movement in time
 How to present solid drawing
o Three-dimensional – making something look three-dimensional (width, height, depth)
despite being in a two-dimensional plane (width, height) by utilizing forms and not shapes

Page 21 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Proper lighting – adding proper lighting and shadowing could give the idea of three-
dimensionality

o Texturing – not regularly used in animation, but it gives more visual interest; not usually used
in animation (Example: Chowder)

o Use of different camera shots and angles – utilizing different shots and angles on a
character would allow the animator to draw them in different perspectives, giving more
perspective as to how three-dimensional a character is

GIF Link: https://i.pinimg.com/originals/7a/e9/a6/7ae9a6fcbebb50d01e4aed3e53d67150.gif

Page 22 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Foreshortening – technique of depicting a character, object, or background with a

projection or extension of space using some pointed-perspectives

o Parallaxing – technique where background images move past the camera more slowly
than foreground images

GIF Link: https://opengameart.org/sites/default/files/parallax-industrial-anim_x2_0.gif

Twenty-One Foundations of Animation

 Devised by Dermot O’Connor in 2018 to supplement some of the concepts and principles in
animation that were not stated in the twelve principles:
 It differs in:
o The arrangement is based on what the author thought was more logical according to
importance
o Some principles were broken down further as they may be technically different
o Some principles were separated
 Foundations of Animation (some may not have definitions as they are same thing as above)
o Appeal
o Strong Design – focuses on utilizing proper proportions and basic shapes
o Staging
o Acting and Pantomime – ability to determine the pose without any face or body parts
(based from staging)
o Keys and Breakdowns – keys are the main poses; breakdowns are main drawings
between the keys (somewhat based on pose-to-pose and straight ahead animation)
o Straight Ahead and Pose-to-Pose
o Thumbnails – planning of the animation by drawing the actions via stick figures (derived
from pose-to-pose animation)
o Timing, Spacing, and Erasing – timing is the frame number that is assigned to the key
poses; spacing refers to the position of the breakdowns and in-betweens
o Squash and Stretch
Page 23 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Arcs
o Primary and
Secondary Action
o Silhouette – helps
communicate the
physical action and
emotion of the
character (more
detailed iteration of
acting and
pantomime; from
staging)
o Line of Action and
Reversals – line of
action refers to the
imaginary line
determining the
direction of the
strongest action;
reversals help with
transitions that can
give character
flexibility (derived
from staging)
o Anticipate,
Overshoot, and
Settle – more
detailed parts of an
action (derived
from timing)
o Opposing Action – if
a part of the body
moves in one
direction, there is
usually a part of the
body that moves in
the opposite
direction; allows for a character to remain in balance (derived from secondary action)
o Counterpose – if a part of the body moves in one direction, there is usually a part of the
body that moves in the opposite direction (more detailed iteration of the opposing
action; derived from overlapping action)
o Leading Action – given action that can be led by a particular part of the body (derived
from anticipation)
o Breaking Joints – loosening of an action which allows a classic, loose-limbed feeling
(more detailed iteration of leading action; derived from anticipation)
o Overlap and Follow Through
o Accents – strongest points of motion in a scene; transitions that move at greater
distance and/or speed (derived from slow in and slow out)
o Exaggeration

Page 24 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Video Reference:
 Becker, A. (2017 May 30). 12 Principles of Animation (Official Full Series) [Video]. Retrieved from
https://www.youtube.com/watch?v=uDqjIdI4bF4

References:
 Johnston, O. and Thomas, F. (1995). The Illusion of Life: Disney Animation. Disney Editions.
 Newton, P. (2016 Jun 6). Animation for Beginners: How to Animate a Head Turn, EnvatoTuts+.
Retrieved from https://design.tutsplus.com/tutorials/animation-for-beginners-how-to-animate-
a-head-turn--cms-26487
 O’Connor, D. (2018 April 23). 21 foundations of animation, AngryAnimator. Retrieved from
https://www.angryanimator.com/word/2018/04/23/21-foundations-of-animation/
 StudioBinder. (2020 March 11). The Ultimate Guide to Camera Shots (50+ Types of Shots and
Angles in Film), StudioBinder. Retrieved from https://www.studiobinder.com/ blog/ultimate-
guide-to-camera-shots
 Tetali, P. (n.d.). Solid Drawing: Design Course: Principles of Animation, D’source. Retrieved from
http://www.dsource.in/course/principles-animation/solid-drawing

ACTIVITY 2: Self-Check 2
Instructions: Read and understand the material on the lesson before answering. The statements are
direct applications of the twelve principles of animation. Please read, understand, and analyze the
statements, and use the photos as reference. Choose the letter of the BEST answer. (20 items, 20 pts.)

1. Yugi Mutou, the main character of Yu-Gi-Oh!, has a very distinct hairstyle and clothing design
compared to others. (Image reference: https://static.fjcdn.com/pictures/Spot+the+main+
character+i+wonder+who+it+could_6f5d3b_4553221.jpg)
A. Anticipation C. Arc
B. Appeal D. Exaggeration

2. The occupants of a car move forward then back abruptly when the car immediately stops,
highlighting the law of inertia. (Image reference: https://media2.giphy.com/media/
26gJztkyhau4A7gE8/source.gif)
A. Appeal C. Exaggeration
B. Arc D. Follow through

3. Animation smears are used to emphasize how fast the action really is. (Image reference:
https://jadziadoesthings.files.wordpress.com/2017/08/xvd2whd.gif)
A. Arc C. Follow through
B. Exaggeration D. Overlapping action

4. The hair of a character turning their head is a bit delayed compared to the movement of the
head. ((Image reference: https://cdna.artstation.com/p/assets/images/images/014/029/352/
original/elaine-aruuke-2018-11-14-at-05-13-56-trim.gif)
A. Exaggeration C. Overlapping action
B. Follow through D. Pose-to-pose

5. In Avatar: The Last Airbender, a lot of secondary characters are depicted of doing small
movements while the main character is doing something else. (Image reference:
https://25.media.tumblr.com/tumblr_lpwp60yqDb1r0vz2ko1_500.gif)
A. Follow through C. Pose-to-pose
B. Overlapping action D. Secondary action

Page 25 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

6. When a character is playing an instrument, they would sometimes sway or move in a certain
plane to further express themselves. (Image reference: https://akibento.com/blog/wp-
content/uploads/2016/12/tumblr_n36zxsoKW21tv44eho1_500.gif)
A. Overlapping action C. Secondary action
B. Pose-to-pose D. Slow in

7. When drawing a jump cycle, it is important to know the different main actions before doing the
intermediate ones. (Image reference: https://tryingtobeananimator.files.wordpress.com/2016/10/
02_anticipation_jump_richardwilliams.jpg)
A. Pose-to-pose C. Slow in
B. Secondary action D. Slow in and slow out

8. The timing of the action initially is slower, and then gets faster to aid the viewer of the flow of the
action. (Image reference: https://media1.tenor.com/images/f3bad1e0b1b04a1907a8294705d586
ae/tenor.gif)
A. Secondary action C. Slow in and slow out
B. Slow in D. Slow out

9. Using foreshortening in a lockdown shot showcases the dimensionality of the character. (Image
reference: https://thumbs.gfycat.com/AgonizingTemptingBluebottlejellyfish-size_restricted.gif)
A. Slow in C. Slow out
B. Slow in and slow out D. Solid drawing

10. A pendulum slows down when it reaches both of its highest points at the leftmost and rightmost
sides. (Image reference: https://media0.giphy.com/media/zOFeKJaHKcpTG/giphy.gif)
A. Slow in and slow out C. Solid drawing
B. Slow out D. Squash

11. A character's face can get scrunched when they pout. (Image reference: https://media.giphy.
com/media/TEJe85dPYW0Uw/giphy.gif)
A. Slow out C. Squash
B. Solid drawing D. Staging

12. The use of a long shot helps the viewer focus on the character interacting with the environment.
(Image reference: https://i.pinimg.com/originals/85/80/00/8580005032fd0da06433f95649ccb2cc.
gif)
A. Solid drawing C. Staging
B. Squash D. Straight ahead

13. A character's face can grow longer when she is surprised. (Image reference: https://thumbs.
gfycat.com/SophisticatedReflectingArachnid-small.gif)
A. Squash C. Straight ahead
B. Staging D. Stretch

14. When animating instrument playing, it would be best to draw the frames in a pipeline method,
and not planning it out. (Image reference: https://pa1.narvii.com/6615/
ec5e5e423ef9a594f6b70a7d415e5869dbd19178_hq.gif)
A. Staging C. Stretch
B. Straight ahead D. Timing

15. Metal Bat from One Punch Man brings his bat behind him before he makes a strike. (Image
reference: https://media1.tenor.com/images/71f436a91d467e2e0abda730313b4b48/tenor.gif)
A. Anticipation C. Stretch
B. Straight ahead D. Timing
Page 26 of 27
 ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: [email protected]; Website: www.uc-bcf.edu.ph

MODULE 2 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

16. The jump, albeit very fast, is slowed down here to emphasize the character and can build
emotional intensity. (Image reference: https://media1.tenor.com/images/
849c248161619d6644bfbef01d44a832/tenor.gif)
A. Anticipation C. Stretch
B. Appeal D. Timing

17. The movement of the arms and legs for the ballerina moves at a circular motion. (Image
reference: https://i.pinimg.com/originals/9b/e5/75/9be57526873ec2d2b36bc7f42441b614.gif)
A. Anticipation C. Arc
B. Appeal D. Timing

18. Japanese animation uses techniques like circle white eyes and reddened face to emphasize the
idea of someone blushing. (Image reference: https://i.pinimg.com/originals/75/12/
a7/7512a7e5524034a2b2d817d963dec557.gif)
A. Arc C. Follow through
B. Exaggeration D. Overlapping action

19. When animating fight sequences, it would be wise to plan out the actions first to have a better
flow of the sequences. (Image reference: https://i.pinimg.com/originals/14/57/29/
145729dd44aee11fb14f7c4181b6a468.gif)
A. Pose-to-pose C. Slow in
B. Secondary action D. Slow in and slow out

20. The character has to have a consistent drawing of the design even when it is being rotated.
(Image reference: https://media1.tenor.com/images/9bfea29facb2e5d630de44dc2d82eb
53/tenor.gif)
A. Slow out C. Squash
B. Solid drawing D. Staging

How to Submit:
 Answer “WW2: Self-Check 2” under “Week 2 – 12 Principles of Animation”.
 For printed modules, place answers on a ¼ sheet of paper with the CAPITAL LETTERS only.
Submission Channels:
 Canvas K-12 LMS (Quizzes)
 Submission of printed modules in Gate 2

Page 27 of 27