Exploring the 12 Principles of Animation with Examples

30/08/2021
blog

These 12 principles of animation have been written in the 1930s by Frank Thomas and Ollie Johnston, two pioneers of animations. Even though the animation methods might have changed up to this day, these 12 principles have remained very actual. So, let us guide you through!

And in case you’re looking for some inspiration, check out our collection of NFT music treasure animations on OpenSea!

The Complete Guide to the 12 Principles of Animation

These animation principles follow closely the basic laws of physics and also anatomy. So, we’ll dive into examples of how to master:

  • timing, spacing and scale
  • the law of lnertia
  • center of gravity
  • action-reacion
  • weight and volume
  • momentum and force

Are you ready? Let’s dive right in!

1. The Squash and Stretch Principles of Animation

Objects need to become longer and flatter to point out concepts such as speed, weight, momentum or mass. In real life, a ball will always squash and stretch when bouncing. It shows flexibility.

The more it squashes and stretches, the softer it is. For example, you cannot animate a bouncing water balloon the same way you animate a tennis ball. The rule of squash and stretch also applies to characters. So, for example, when a character jumps, his body is stretching a bit. When he lands, he squashes to keep the balance.

There is a lot of this squash and stretch happening in our own lives. Try to jump and then land without changing your position one bit. You just can’t!

The most important thing about the squash and stretch principle of animation is to keep the same volume of the object as it squashes and stretches.

When bouncing a ball, the overall volume of the ball shall stay the same. So, you stretch the ball, it gets longer but also narrower. When it squashes, it gets flatter but also wider.

2. Anticipation

The second of the 12 principles of animation, anticipation, sets the stage for future action. It gives the audience a clue as to what will happen next and makes the action more realistic.

Let’s assume you want to make a character jump. You cannot just propel him into thin air. It won’t be realistic. You can’t just jump like that. First, you need to build energy, so you crouch down like a spring that coils up before releasing, and then… up you go.

Or let’s assume you want to animate a baseball player pitching the ball. The first move he makes is to swing his body and arm backwards to gain energy. Then he releases the blow. It is the natural thing to do, and it also creates anticipation for the viewer.

The same way, in cartoons, when a character is about to run, he winds up and then takes off. The squash and stretch and the anticipation principles go hand in hand here.

So, anticipation is a crucial animation principle communicating to the audience that a certain action follows. Without anticipation, things will look confusing.

3. The Animation Principle of Staging

Staging is one of the 12 principles of animation in motion design. It basically implies setting up the scene for future action. From the placement of the characters to the background elements, everything needs to be plain and clear, so the viewer will know what to expect.

Moreover, through staging, you control where your audience is looking. If you have a scene with more characters and elements and show them all simultaneously, they’ll compete for the stage presence. So, the viewer won’t know which one to look at.

If you have big actions to show on screen, then you should have a wider camera focus. Close-ups are important for showing facial expressions.

According to this animation principle, you shouldn’t place the main action off to one side. Place it in the centre or one of the thirds of the screen. If your character is facing to the side, make sure there’s empty space in the direction he’s facing.

So, as you can see, staging is also about timing your animation properly. You should let one action finish before you start another one. Insert some pauses in your actions if they’re too complex. Your audience needs time to process those scenes. If you include text in your animation, make sure you leave it on the screen for as long as it takes you to read it out loud three times. Yes, it’s part of the principles of animation.

4. Straight Ahead Action& Pose to Pose

So, these two animation principles are considered as one because they both describe the process of drawing a moving character.

“Straight ahead” refers to drawing a scene frame by frame. You’ll basically create each pose of the animation one by one. So, let’s assume you want to draw a character jumping in the air and then landing down. You basically draw every frame from him standing upright to building up energy, getting high in the air and then landing on the ground.

“Pose to pose” is more systematic. You would just draw the first pose and the last one – right before he jumps and right after he lands. This helps with timing and proportions. Your animation timing sheet will be tidier, and you can then draw between these poses to add more details to your animation.

The pose to pose method gives you more control. You basically draw the beginning and the end of the action and then work backwards to fill in the details. The “straight-ahead” animation, on the other hand, is more unpredictable. You can use it for actions that do not have a clear pattern, like a fire, water droplets, dust, explosions. For these particular animations, the design evolves as you draw it.

You should also be familiar with these words:

  • Keys – the main poses
  • Extremes – the secondary poses
  • Breakdowns – further broken-down poses

5. Follow Through& Overlapping Action

Ok, so the next principle of animation deals with the appendages that are dragged behind the rest of the body when the character is engaged in a certain action.

In real life, things move at different speeds, and there’s a lot of fluidity in our movements. So, for example, when you run, your hair might be blowing in the wind. When you come to a stop, your hair might continue blowing a bit before setting in a position. Or let’s say you wear a scarf that’s dragging behind you when you run. It won’t come to an immediate stop after you stop. So, this is the follow-through principle of animation.

Overlapping action deals with how different parts of the same object moving at different times. This is basically the wave principle animation. So, for example, when a blade of grass moves in the wind, you need to animate the base first. Then, the rest of the grass will follow the movement, but at different rates. This is part of the physics laws of motion.

Moreover, overlapping makes the action more graceful and real. For example, if you offset the movement of the arms and legs, your character’s jump will simply look more interesting.

There is also another component here. It is called “moving hold”, and it prevents the animation from dying out. So, basically, even when a character is standing still, you need to animate parts of its body, like the eyes or breathing. This way, you’ll breathe life into it.

6. The Slow In& Slow Out Principle of Animation

This concept refers to how every movement starts slowly, then builds up speed and ends slowly again. Otherwise, every movement will just feel mechanical. Only robots could move their parts at equal speed.

It’s very unrealistic for a character to go from a complete standstill to super fast speed. So, make sure you add a few frames in between to create the effect of slow in& slow out.

7. Arcs

We generally move in an arc-like motion. It’s a fact. Only robots would move in a perfectly straight line.

One perfect example of this animation principle is a ball bouncing. It won’t bounce in a straight vertical line, will it? It will bounce in an arc, from left to right or otherwise.

When we turn our head to the side, we don’t move it in a perfectly straight line. We tend to dip our heads down before turning them to the side. It’s a more natural movement.

Or let’s assume a character is landing on the ground with his arms and legs after a major jump. His back will arch inwards from the shock. It’s natural.

8. Secondary Action

The secondary action is a gesture that supports the main action and adds another dimension to your character animation.

So, for example, you have a character walking angrily. The main action is represented by the legs moving. But apart from that, you should add more, like facial expression, crossed arms, head bobbing, etc.

Care for another example? Let’s imagine a character knocking on the door. One hand knocks on the door, ok? But what does the other hand do? You can make it into a fist to convey the message that the character is knocking angrily. You could also have the character knocking carefully on the door while also looking back and forth to show that he doesn’t want to be seen knocking.

9. The Timing Animation Principle

Timing represents the number of frames between two poses. It also dictates the speed of the animation. The standard film rate is 24 frames per second.

That means 24 drawings per second. So, if you draw 24 frames per second, you could say you draw on “ones.” If you draw 12 frames per second, that’s called drawing on “twos”. If you draw 6, you draw on “threes”, and so on.

The most common type of timing for animation is drawing on twos. It cuts the amount of work in half, obviously, making slow actions look smoother. Drawing on “ones” is essential for very fast actions, like a scramble or flurry.

Timing for animation can also build emotion, set the mood and personality.

10. The Exaggeration Principle of Animation

You can use exaggeration to make every action more obvious and thus real. The exaggeration rule plainly dictates that if a character is happy, you should make her even happier. If a character is angry, make her angrier, so smoke would come out of her ears. Don’t distort the characters, though. Just make them more convincing.  

11. Solid Drawing

Solid drawing is one of the 12 principles of animation. In 2D animation, solid drawing is an accurate representation of a character so that the volume, weight, shadows and anatomy in his poise are correct and natural.

So, you need some knowledge of three-dimensional drawing. There are some simple rules. For example, if you want to draw a line on a sphere, the line must follow the contour of the sphere. If it’s just a straight line, it will make the sphere look flat.  

When building the first draft of a character, use solid shapes such as cubes, cylinders and spheres. With squares, rectangles or circles, you cannot be mindful of the space therein.

12. The Appeal principle of animation

The appeal is basically what it says it is – making your characters pleasing to the audience.

Not only the good characters should be appealing, but also the villains. The appeal is not about being good-looking; it’s more about charisma. It is crucial to have an interesting and charismatic villain in your story.

However, we all have different standards about what’s appealing or not. So, how do you deal with that as an animator? There are a few rules you can follow here:

  • use a variety of shapes – you should have a crazy spectrum of characters, each with a different shape and configuration
  • play with proportions – make the most interesting aspects of yor character bigger, give them a specific characteristic that sets them apart from the rest (Eg. cartonists usually enlarge the head and eyes, and shrink the body of a character)
  • keep it simple in design – don’t overcomplicate the character with too many patterns; you’re not illustrating, you’re animating, and that means you’re going to draw that character hundreds of times, so make it simple and interesting.

These are the 12 principles of animation. They require quite a lot of studying, so we invite you to dive deeper into practice. Once you’re happy with your creations, you can simply turn them into dotLotties or lotties and monetize them on the blockchain.

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]