Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ahe...
Principles We’ll CoverToday
• Timing & Spacing
• Follow Through & Overlapping
Action
• Anticipation
• Squash and stretch
•...
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 characte...
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 depe...
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 ahea...
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?
• Plan...
Designing Interface Animation
designinginterfaceanimation.com
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
WAW - Classic Principles Worth Stealing
Upcoming SlideShare
Loading in …5
×

WAW - Classic Principles Worth Stealing

1,143 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

WAW - Classic Principles Worth Stealing

  1. 1. Classic Animation Theory “The 12 classic principles”
  2. 2. the12principles.tumblr.com
  3. 3. • Cennydd Bowles & Val Head The Twelve Principles
  4. 4. 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
  5. 5. Principles We’ll CoverToday • Timing & Spacing • Follow Through & Overlapping Action • Anticipation • Squash and stretch • Staging • Arcs • Secondary action/Layered animation • Appeal • Exaggeration • Mass & weight
  6. 6. Timing & Spacing
  7. 7. Timing The amount of time it takes for an action to happen. The duration.
  8. 8. Timing
  9. 9. Spacing The changes in speed over the 
 duration of the action’s timing.
  10. 10. Spacing
  11. 11. Timing & Spacing Makes animated objects appear to obey the laws of physics.
 Establishes mood, emotion and reaction.
  12. 12. Timing = duration Spacing = easing
  13. 13. CSS Easing Keywords linear ease ease-in ease-out ease-in-out
  14. 14. cubic-bezier(0.42, 0, 0.58, 1);
  15. 15. cubic-bezier(x1,y1,x2,y2);
  16. 16. (x1, y1) (x2, y2)
  17. 17. cubic-bezier.com
  18. 18. Mass & Weight
  19. 19. Follow Through / Overlapping Action • Cennydd Bowles & Val Head
  20. 20. 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
  21. 21. Anticipation • A little hesitation before the main movement. • Preparing or getting ready for the main movement.
  22. 22. Anticipation • Cennydd Bowles & Val Head
  23. 23. Arcs • Cennydd Bowles & Val Head
  24. 24. Arcs • Organic movements typically don’t follow straight lines of motion
  25. 25. Secondary Action • Cennydd Bowles & Val Head
  26. 26. Secondary Action • Any action that supports or enhances the main action
  27. 27. Exaggeration • Cennydd Bowles & Val Head
  28. 28. Exaggeration • The “truth” but more extreme • Actions made bigger and more drastic for greater effect and impact
  29. 29. Appeal • Cennydd Bowles & Val Head
  30. 30. Appeal • “Charisma” of an animation • That thing that makes you like or particularly appreciate an animation
  31. 31. Squash and stretch • Cennydd Bowles & Val Head
  32. 32. 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
  33. 33. Staging • Cennydd Bowles & Val Head
  34. 34. Staging • Directing the audience's attention, and making it clear what is of greatest importance in a scene
  35. 35. 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
  36. 36. Beyond the twelve…
  37. 37. Choreography
  38. 38. Similar objects animate in similar ways
  39. 39. Entrance informs exit
  40. 40. Match velocities
  41. 41. Consistent or Cohesive?
  42. 42. Consistent
  43. 43. Cohesive
  44. 44. motionandmeaning.io/episode04.html
  45. 45. Continuity
  46. 46. 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
  47. 47. Designing Interface Animation designinginterfaceanimation.com

×