Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Rss Bot

Understand the 12 principles of animation

Recommended Posts

The 12 principles of animation were first introduced by Disney animators Ollie Johnston and Frank Thomas in their book The Illusion of Life: Disney Animation, which was originally released in 1981. In this book, Johnston and Thomas examine the work of leading Disney animators from the 1930s and onwards, and boil their approach down to 12 basic principles.

In this article, we'll take a closer look at each one, with helpful GIFs from Vincenzo Lodigiani, who also made the short video The Illusion of Life.

Once you understand these 12 principles, you'll be able to take your animations to the next level. These are the 12 principles and what they mean:

01. Squash and stretch

2nJLvjcdBbhQwFrKuJhLUk.gif

Show gravity with squash and stretch

The squash and stretch principle is considered the most important of the 12 principles. When applied, it gives your animated characters and objects the illusion of gravity, weight, mass and flexibility. Think about how a bouncing rubber ball may react when tossed into the air: the ball stretches when it travels up and down and squishes when it hits the ground.

When using squash and stretch, it's important to keep the object's volume consistent. So when you stretch something it needs to get thinner, and when you squash something it needs to get wider.

02. Anticipation

mjuqRrekqxUm3a5ocpcXWi.gif

Anticipation refers to the small movements that prepare you for a bigger one

Anticipation helps to prepare the viewer for what's about to happen. When applied, it helps to make the object's action more realistic. 

Consider what it might look like if you were to jump without bending your knees, or perhaps to throw a ball without first pulling your arm back. Not only would it look unnatural, we're not even sure it's possible to jump without bending your knees! So animating movements without a flicker of anticipation would also cause your animation to be stale and lifeless.

03. Staging

Scab9D65rwubtYBRAy5N6m.gif

Keep audiences' eyes on the main event

Staging in animation is a lot like composition in artwork – meaning, you are responsible for drawing the viewer's attention to what's important within the scene. Simply put: keep the focus on what's important, and keep everything else of non-importance to a minimum. 

04. Straight ahead action and pose to pose

6y8QLpfM3SsJZBPXTyyiA.gif

Straight ahead action and pose to pose are often combined

There are two ways to handle drawing animation: straight ahead and pose to pose. Each has its own benefits, and they are often combined.

Straight ahead action involves drawing frame-by-frame from start-to-finish. If you're looking for fluid, realistic movement, straight ahead action is your best bet.

With the pose to pose technique, you draw the beginning frame, the end frame, and a few key frames in between. Then you go back and complete the rest. Using this technique gives you a bit more control within the scene and allows you to increase the dramatic effect.

05. Follow through and overlapping action

PdZZqEa3F8MzMxom6BcAa4.gif

Follow through and overlapping action is the principle that not everything on an object stops dead at the same time

When objects are in motion, then they come to a stop, not everything on that object will stop at the same time. Also, not everything on an object will move at the same rate.

If your character is running across the scene, their arms and legs may have a different timing than their head – this is overlapping action. Likewise, when they stop running, their hair will likely continue to move for a few frames as their head comes to rest – this is follow through. These are important principles to understand if you want your animation to flow.

06. Slow in and slow out

7Kk67QVVMb9ATySZt8xjS6.gif

Adding extra frames gives the impression of a change of speed

The best way to understand slow in and slow out is to think about how a car accelerates and decelerates. In both cases, things slow down. In animation, this effect is achieved by adding more frames at the beginning and end of an action sequence. Apply this principle to give your objects more life.

07. Arc

Xnf5wGbLFymeiiGBJYEvW9.gif

Most objects follow an arc when they're moving

When working in animation, it's best to stick with the laws of physics. As most objects follow an arc or a path when they're moving, your animations should reflect that arc. 

For example, when you toss a ball into the air, it follows a natural arc due to the Earth's gravity.

08. Secondary action

GtHRWZpuzFaWUtcbC8HhjB.gif

Talking while walking is an example of a secondary action

Secondary actions are used to support or emphasise the main action. Adding secondary actions help add more dimension to your characters and objects.

For instance, the subtle movement of your character’s hair as they walk, or perhaps a facial expression or a secondary object reacting to the first. Whatever the case may be, this secondary action should not distract from the primary one.

09. Timing

XXZtphoD2juLeHcZyvBsYE.gif

Timing communicates believability and hints at a character's personality

Again, we need to look to the laws of physics, and apply what we see in the natural world to our animations. In this case, timing.

If you move an object too quickly or too slowly, it won't be believable. Using the correct timing allows you to control the mood and the reaction of your characters and objects. That's not to say you can't push things a little – but if you do, be consistent!

10. Exaggeration

2i6Q7B8yr49T8AeF8n6qSG.gif

Earlier Disney animations ramped the exaggeration right up

Too much realism can ruin an animation, making it appear static and boring. Instead, add some exaggeration to your characters and objects to make them more dynamic.

Find ways to push the limits just beyond what's possible, and your animations will pop.

11. Solid drawing

i7kXktWWNwALw9WEiVfvQK.gif

Giving your animations volume and weight is key

You need to understand the basics of drawing. This includes knowing how to draw in three-dimensional space and understanding form and anatomy, weight and volume, and lights and shadows.

While you can push the limits here, too, it's important to remain consistent. If your world has wonky doors and a warped perspective, keep that perspective throughout the entire animation. Otherwise, things will fall apart.

12. Appeal

qLUevtGfbWrPLEtVkba9RM.gif

You can inject a lot of personality into animated characters through their movements

Your characters, objects, and the world in which they live need to appeal to the viewer. This includes having an easy to read design, solid drawing, and a personality. There is no formula for getting this right, but it starts with strong character development and being able to tell your story through the art of animation.

Related articles:

If you're looking a little more guidance and some tools to help get you started, check out the Introduction to Moho tutorial series.

View the full article

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×