There was a time when animation used to be only thought of as cartoons for kids. Nowadays, it’s dominating everyone’s screens. Adult-centric animation, and, for our purposes, animated advertisements and content have exploded. As a multi-billion dollar industry and with 65% of businesses using animation in their marketing, it’s not hard to see just how important it’s become.
But to truly captivate an audience, it’s not enough just to animate; it’s essential to animate well. So what makes an animation good? What are the key things to look out for when animating? Lucky for us, Disney animators Ollie Johnston and Frank Thomas have outlined 12 principles that are essential for great animation. And we’re here to break down what each principle means, as well as provide you with an example to illustrate just what’s being discussed. Ready to learn? Let’s jump into it!
The 12 Principles of Animation
1) Squash and Stretch
The first principle outlined is ‘Squash and Stretch’. Picture a bouncing ball. How it deforms when it hits the ground and elongates as it rebounds. This dynamic duo of actions gives a sense of weight and flexibility to animated objects. By adding squash and stretch, animators impart a sense of life and dynamism to their characters, providing the illusion of gravity, volume, and mass.
Observe the way the fabric moves and expands in this clip. It adds a tactile element to the video where you can really imagine how the fabric would stretch if you pulled on it. This makes the animation feel organic rather than static. This principle infuses believability, emphasizing weight and flexibility.
2) Anticipation
Think about your favorite ambush scene in a cartoon. The hero slowly moves closer to the villain, and before they strike, there’s a brief, tantalizing moment of preparation. Anticipation sets the stage, making actions feel more realistic. It’s a preparatory motion—a winding up of sorts.
Look at the way that the screens plop down before the character notices them. We as the viewer see the screens before the character does, and it makes us anticipate their reaction to it. By employing anticipation, animators provide a cue to the audience, preparing them for what’s to come. This not only amplifies the subsequent action but also adds realism and relatability — it feels like how it would in the real world!
3) Staging
Just as a director frames a crucial movie scene, animators use staging to spotlight key actions or emotions, ensuring the audience’s gaze is right where it needs to be. Whether it’s a subtle gesture or a grand spectacle, effective staging makes the intent and emotion crystal clear.
The chef here is constantly centered throughout the video, making it clear that it’s his journey and struggles that we’re following. With staging, animators can control where the audience looks and what they feel, so no crucial detail goes unnoticed.
4) Straight Ahead Action and Pose-to-Pose
These are foundational techniques that determine the flow of animation.
“Straight ahead” means drawing scenes frame by frame in order. You’ll be drawing the first frame and then drawing subsequent frames one after the other. This approach can keep things fresh as you’re playing it by ear, but as expected, that also means that you might run into issues due to the lack of planning.
“Pose-to-pose” is about drawing the main scenes first and then adding the middle parts. In other words, you work on the start and the finish first and figure out the journey from there. This approach gives you the most control over your outcome but runs the risk of feeling too planned.
The choice between the two can affect the fluidity or precision of a scene. This video is an excellent guide on the pros and cons of each style and when they’re best applied. By playing around with these techniques, you can either give a spontaneous feel to the animation or really zoom in on the key emotional or narrative beats.
5) Follow Through and Overlapping Action
If you were to sprint and come to a sudden stop, you wouldn’t end up perfectly still right away. Between the momentum of your running and the wind in your hair, you’d likely find parts of yourself moving before adjusting to your stillness. The same thing applies to animation. You’ll need to capture the momentum and the aftermath of an action.
Look at the way the wallet-fishing is animated in the first few seconds of this video. The thief’s head tilts back to emphasise the force of the pull, and the wallet sways after being plucked out. These extra touches mimic what we would see in real life and make the animation more interesting. As one action concludes, parts of an animated figure should continue moving, decelerating in a natural manner. This lends a touch of reality, ensuring animations don’t feel abrupt or mechanical.
6) Ease In, Ease Out
The real world doesn’t operate at fixed speeds. When you’re driving, you don’t go straight to full speed. There’s a gradual build-up when you’re starting, and likewise, a gradual fall in speed when you slow down. Actions begin slowly, accelerate, and then slow down again. Showing that transition is exactly what this principle is all about! This adds a layer of authenticity and keeps things from feeling robotic.
The way that the building blocks fall here follows this exact principle. They don’t just crumble all at once. Instead, it’s a slight tilt before they slip off and the whole structure comes apart. This gives depth and fluidity to animations, enhancing the feel of realism.
7) Arcs
When you’re doing the robot, your arms swing about completely stiffly, and it feels mechanical. That’s because in nature, most actions follow an arced path. Whether it’s a swinging limb or a leaping animal, arcs give motion a natural trajectory. And unless you’re animating a robot, you’ll want to make arcs.
Notice the way the characters move in that video. The way their arms and body move follows an arc, making it feel more natural as a result. By following this principle, you can avoid jarring movements and instead make fluid actions that feel innately lifelike. Natural motion isn’t linear, and thus your animation shouldn’t be either.
8) Secondary Action
Back to the example of driving, when you park your car, does it simply stop? Is the movement the only change? No, your headlights flash off and the exhaust stops. In an animation, this would be considered a secondary action. While primary actions drive (pun intended) the narrative, secondary actions add richness and depth. It’s not just about a character walking, it’s also about the subtle swish of a tail or the gentle sway of leaves in the breeze. These auxiliary movements amplify the main action, injecting layers of depth.
Consider the visual metaphor of a wind turbine in this video. As it spins, the clouds surrounding it move away, giving the illusion of a strong wind blowing the area clear. This secondary action strengthens the metaphor and adds depth to the animation, improving the scene.
9) Timing
It’s not just about when an action starts and ends, but how it unfolds in between. You can’t make a car crash convincing if we see it happen at a snail’s pace. You’ll need to make sure that the timing and momentum of each action and each scene line up with what the audience expects if you want it to be realistic.
At the same time, you can manipulate timing for greater dramatic or emotional effect. In the video, the speed of the running slows as the video mentions ageing, serving as a visual analogy for the degradation that comes with the idea. And as a callback to our earlier point about anticipation, the sudden slowing makes us expect a drastic change following the complete stop, preparing us for the new scene.
Moreover, timing can set the tone for the entire scene. Proper timing can make the difference between a slapstick comedic scene and a dramatic moment. A direct delivery might be an assertive statement, but wait just a second too long and it can become awkward humour. By mastering timing, you can control the mood, pace, and emotional resonance of a scene.
10) Exaggeration
Ever seen the wide-eyed shock in cartoons? While real-life expressions are usually nowhere near as dramatic, this massive exaggeration adds to the fun of the show, right? That applies to everything in animation, not just facial expressions. Exaggeration accentuates emotion, adding a theatrical flair to animations.
Consider the metaphor of the bigger person taking and trying to eat the smaller person’s money here. While real business owners aren’t physically bigger, the exaggerated size emphasises the power imbalance between the two and how helpless the worker can feel in the situation. Likewise, the giant hand coming from the sky to stop the theft represents Human Protocol’s involvement in protecting workers. These exaggerations help amplify the basic message being communicated in an easier-to-understand and more entertaining way.
11) Solid Drawing
Now, if you’re doing 2D animation, you need to make sure it adheres to the laws of a 3D world. This means consistent proportions, accurate perspective, an understanding of anatomy, and the strategic use of foreshortening to represent objects correctly. Three-dimensionality, weight, and volume—this principle anchors characters in realism, transforming flat sketches into lifelike beings.
This video is a good example. Despite being animated in 2D, it makes use of perspective and space to make the environment feel 3D. The way that characters and objects are represented feels more lifelike as a result.
12) Appeal
And, finally, it’s gotta be interesting. Just as magnetism draws us to certain people, appeal in animation means the audience has to be drawn to your characters. You can achieve this through great character design. Think a heroic stance, a villainous smirk, or a lovable design. These things tell the audience something about the characters and make them iconic, ensuring they linger in the audience’s minds long after the screen goes black.
Look at the ways that the different components of the immune system are depicted here. They’re all colorful, rounded blobs with their own personality. Simple cells are humanized and given quirks that endear us to them, which just makes the video that much more fun to watch. That’s the power of appeal.
Final Shot
The world of animation is vast, complex, and infinitely rewarding. Following these 12 principles can serve as a roadmap to success, guiding you along the path to great animation. Whether it’s realism, emotionality, or just intrigue that you’re trying for, studying and applying these principles is sure to help.