Classic Animation Theory
“The 12 classic principles”
the12principles.tumblr.com
• Cennydd Bowles & Val Head
The Twelve Principles
The Twelve Principles
• Timing (and spacing)
• Follow through
• Anticipation
• Squash and stretch
• Staging
• Straight ahead & Pose to pose
• Slow in, slow out
• Arcs
• Secondary action
• Solid drawing
• Appeal
• Exaggeration
Principles We’ll CoverToday
• Timing & Spacing
• Follow Through & Overlapping
Action
• Anticipation
• Squash and stretch
• Staging
• Arcs
• Secondary action/Layered animation
• Appeal
• Exaggeration
• Mass & weight
Timing & Spacing
Timing
The amount of time it takes for an
action to happen. The duration.
Timing
Spacing
The changes in speed over the 

duration of the action’s timing.
Spacing
Timing & Spacing
Makes animated objects appear to obey the
laws of physics.

Establishes mood, emotion and reaction.
Timing = duration
Spacing = easing
CSS Easing Keywords
linear ease ease-in
ease-out ease-in-out
cubic-bezier(0.42, 0, 0.58, 1);
cubic-bezier(x1,y1,x2,y2);
(x1, y1)
(x2, y2)
cubic-bezier.com
Mass & Weight
Follow Through /
Overlapping Action
• Cennydd Bowles & Val Head
Follow Through /
Overlapping Action
• Not everything comes to a stop at once
• Helps giving the impression that a character is obeying the
laws of physics
• Different parts of the “body” move at different rates
Anticipation
• A little hesitation before the main movement.
• Preparing or getting ready for the main movement.
Anticipation
• Cennydd Bowles & Val Head
Arcs
• Cennydd Bowles & Val Head
Arcs
• Organic movements typically don’t follow straight lines
of motion
Secondary Action
• Cennydd Bowles & Val Head
Secondary Action
• Any action that supports or enhances the
main action
Exaggeration
• Cennydd Bowles & Val Head
Exaggeration
• The “truth” but more extreme
• Actions made bigger and more drastic for greater effect and
impact
Appeal
• Cennydd Bowles & Val Head
Appeal
• “Charisma” of an animation
• That thing that makes you like or particularly appreciate an
animation
Squash and stretch
• Cennydd Bowles & Val Head
Squash and Stretch
• Gives a sense of weight and flexibility of an object.
• Objects tend to change shape as they move depending on
inertia and the elasticity of what they’re made of
• Important to maintain volume of the object
Staging
• Cennydd Bowles & Val Head
Staging
• Directing the audience's attention, and making it clear
what is of greatest importance in a scene
Name that principle!
• Timing (and spacing)
• Follow through
• Anticipation
• Squash and stretch
• Staging
• Straight ahead & Pose to pose
• Slow in, slow out
• Arcs
• Secondary action
• Solid drawing
• Appeal
• Exaggeration
Beyond the twelve…
Choreography
Similar objects animate in similar ways
Entrance informs exit
Match velocities
Consistent or Cohesive?
Consistent
Cohesive
motionandmeaning.io/episode04.html
Continuity
Visual Continuity
• Reuse elements between views
• Why should it leave the screen just to come right
back on again?
• Planning entrance and exit movements vs. fading to
black every time
Designing Interface Animation
designinginterfaceanimation.com

WAW - Classic Principles Worth Stealing