Introduction

Before I start dumping all 12 Animation Principles at you, I would like to let you know that I've written a similar post like this from way back on Steemit. Sadly, it is way back that I can't seem to find the post anymore. The reason I'm doing a post on the 12 Animation Principles again is mainly because

1. It's very important as it is the fundamentals of all animation.
2. I would love to start archiving my animation guides in my Wordpress blog for future references.
3. The 12 Animation Principles for animators is do or die. It is essential for ALL animators and it has always been these 12 basic principles. (Why change something that is already perfect right?)

I hope that Junior/Senior animators and even animation enthusiast will find this useful as a recap/refresh of these 12 very simple principles but yet takes years to perfect.

---

The 12 Animation Principles

1. Squash & Stretch

A simple principle but can add a ton of value to your animation. The Squash & Stretch basically tells audience the rigidity of an object.

Take for example, a boy jumping on a bed.

Everytime the boy lands on the bed, the bed will cushion(Squash) his landing and because the bed is made of spring and cushion, the amount of squash represented when the boy lands will show you the value of rigidity the bed has.

On the other hand, when the boy bounces off the bed, the bed will have a slight stretch upwards. This is what we call followthrough which is one of the 12 animation principles that I will be explaining later.

2. Anticipation

Anticipation is super important because it adds realism to the character. In an action phase, there are three components. The pre-action, action and execution. Anticipation is the pre-action phase where it informs the audience that the character is about to execute and action.

Just like the GIF above that clearly shows all three components of the action phase. The anticipation can be seen when the roadrunner flaps it's feet before dashing away.

3. Staging

Staging plays an important role in making sure the characters & the background delivers the story clearly to the audience. Of course, one of the vital elements that helps execute a perfect storyline is the camera angles.

Various camera angles show different feelings, emotions and how the background and the characters seamless piece together. The background mustn't take away the focus of the audience when a character is striking a key pose.

The staging of an animation scene must always communicate clearly the emotions, mood and story of the scene.

4. Straight Ahead & Pose to Pose

This is where the animator plans for the shot. This will include timing and spacing of the animation. Though this is a draft phase for the animation, the key poses must be nailed down. From pose A to pose B to pose C.

When the final outcome is good, most of the time is because during the planning phase, the pose-to-pose was done well.

5. Followthrough and Overlapping

This adds realism to the characters or object. In reality, no parts of an object moves and stops at the same time.

Take for example, the wedding veil as she jumps to hug him.

The GIF above perfectly shows that because the wedding veil is made of light fabric, the speed is dampened as it flows through the wind as she leaps towards her husband. This is called overlapping. Nothing stops all at once. The wedding veil is the last to stop.

This happens to almost everything that is organic such as the human hair, ears, clothes and many more. The flow of the movement where all the other parts catch up to the core mass is called followthrough.

6. Ease-in & Ease-out

The Ease-in & Ease out basically gives 'breathing spaces' to the audience. It helps deliver the story more fluidly. The spacing between keyframes is what directs how fast the objects stops or how fast it starts.

Have a look at the GIF above, as the karate kid moves into an exhale resting pose, he takes a deep loooonnggg breath. How do I know that the breath he took was deep and long? It is because of the easing in of his body and hands. He then lets out his breath which slowly eases out.

7. Arcs

Everything thing has an arc movement except certain special instances. This is very prominent in organic characters like humans or animals. The movement of the arms and legs all move in a circular arc movement.

This will enhance the movement to make it seem more natural and realistic. It also helps the animation flow looks more pleasant. Animation without the arc is like an object instead of moving from point A to point B, it takes a detour and is jerks the whole animation smoothness.

8. Secondary Action

Secondary Action helps enhance the main action and pushes the animation to be more expressive and solid. Without secondary actions, the action can hardly express enough from what the character is feeling.

It is basically the 'supporting action' that helps enhance the movement. Secondary actions can include the arms movement, facial expression and many more.

9. Timing

The timing of an animation helps emphasize whatever the emotions, the urgency of the character. Timing can also show the audience whether that object is heavy or light. Sometimes with good and proper timing, the audience can also tell what material that object is made of.

Animators use timing to exaggerate and action to tell a story better.

There are no actions with equal timing except probably a mechanical repetitive robot.

Timing also shows whether the character is eager, restless, happy, excited and many more. Like the GIF above, the minion on the left screen is DYING to get out of the coldness. Hence, quickly wrapping himself tight would show that urgency.

10. Exaggeration

This is by far the best example for an exaggeration used right. This principle is pretty straight forward. Make an action, and exaggerate it. Often done in cartoons and slapstick comedies to emphasize a certain action/movement.

Like the example above, The Mask oogles at a hot babe that just walked into the restaurant. Though I must say that we have to becareful when animating an exaggerated movement as to not take the believability out of the scene.

An exaggeration done right is when the shot is still believable.

11. Solid Drawing

The whole point for this principle is so that the the character/object feels solid. Like it has substance and some form of weight to it. The drawing needs to have form in 2D as it should be in 3D as well. There are many ways to make the object/character looks more solid and it depends on what medium or techniques you are going to use. It could be adding tonal values with pencil sketches, adding shadow and highlights to the 3D character and many more.

12. Appeal

I always think that Disney characters are always so appealing and likable. And that is what draws the audience to do. That is to like and love these characters and to form an attachment to them.

Most of the time, the main character has a lot of charisma and if not is charming in some way.

 

---

Thank you

There you have it! I'm finally done with sharing The 12 Basic Animation Principles to you guys. I hope I didn't bore you guys and I hope that it isn't too technical. I try to incorporate those giphys in order to help you get a better understanding of the principles.

Truth be told, these 12 Principles are very vital whether you're a Junior/Senior/Master animator because all animations will come back to these 12 and not one of these principles can be forgotten.

I hope that you've learned something new today as I hope to continue writing more guides in the near future. Thank God for @steempress-io for allowing me crossover my guides to Steemit!

_{All Giphys were taken from www.giphy.com}

Thank You

If you like what I do, check out my other posts on meetups, animation, and designs.

Get your Personalized Steemit Profile Banner,Logos & GIFs

DM me on discord : zord189#7776

_{Credits to @pinstory & @coloringiship for this lovely photo of me.}

---

_{Animated Banner Created By @zord189}

---

---

 

---

Posted from my blog with SteemPress : http://zord189.vornix.blog/2018/06/27/animation-the-12-essential-animation-principles/

---