Cookies are used for the best experience on my website.

Accept Cookie Policy

No internet detected

Check your connection and try again.

Logo Image

No match found

Buy a coffee

I launched this blog in 1995. Since then, we have published 1603 articles. It's all free and means a lot of work in my spare time. I enjoy sharing knowledge and experiences with you.

Your support

Have you learned something new by reading, listening, or watching my content? With your help, I can spend enough time to keep publishing great content in the future.

Or, select an option below:

A small slice of my data processing time each month

It's ongoing work running this site and what's really great is ongoing support. Here's a sense of what goes into this site: research topics for discussion. Manage the Tech stuff: website, SEO, graphics, email, back-end servers, DNS routing, edge servers. Create advertisements and load the campaigns in Google Ads. Manage the social media forums (Facebook, Reddit, Twitter). Write updates to the blog. Keep GitHub up-to-date.

$4.50 — A large cappuccino at my local

Things just work better with coffee! I like to take the kids to school then grab a cappuccino from my local on the way home before beginning the things that take mental energy.

$8.99 — A month of Netflix for some quiet nights in

A lot of the work on this happens after hours when I should be relaxing on the couch. Help me make it so and I promise to keep off the devices for a bit!

$11.50 — Fund a month of email delivery

This site sends out thousands of emails every month. For that volume and to ensure deliverability, I need to pay MailChimp.

$20 — Pay for one month of AWS storage fees

Websites are not free. The storage alone takes some cash. If you are willing to lighten the burden, we can keep this site up online.

$30 — One hour's pay for a graphics artist

Art doesn't create itself without a hand to guide it. I can't draw, so I need to pay others to help.

$45 — Pay a full-stack web developer for one hour

Much of the work on this site happens on weekends which means giving up time with the kids. Help me pay the developers so I can give my kids more time.

Disney's 12 Principles of Animation

Disney's principles of animation underpin all motion ⋯

Author

Richie Bartlett, Jr.


  • 1186

  • 6237

  • 1

  • 13

  • 0

Image credit: Disney

Have you heard about Disney’s 12 principles of animation? They were written about by animators Ollie Johnston and Frank Thomas in the book The Illusion of Life: Disney Animation, first published in 1982. Johnston and Thomas cut the studio’s approach down to 12 basic principles of animation by thoroughly examining the artwork of leading Disney animators from the 1930s onwards.

You can use the basic principles of animation as the starting point for your animation work. But they’re not just useful for movie animation and cartoons, they have use in other fields, too. The most obvious use is for animating characters but the rules can be applied to areas like UI animation and using motion in interfaces or websites using CSS animation.

Principles of Animation 🔗

In this article, we take a closer look at each animation principle. To see them in action, you could consider signing up to Disney Plus or try them out yourself with the best tablets for animation paired with the best animation software. Once you understand these 12 principles of animation, you’ll be able to take your motion work to the next level.

This article features images and video from Vincenzo Lodigiani, who also made the short video The Illusion of Life (below).
🎥 The Illusion of Life | Video (2:46 minutes)

Squash and stretch 🔗

The squash and stretch principle is considered the most important of the 12 principles of animation. 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.

Anticipation 🔗

Anticipation helps to prepare the viewer for what’s about to happen. When applied, it has the effect of making the object’s action more realistic.

Consider how if might look if you were to jump in the air without bending your knees, or perhaps to throw a ball without first pulling your arm back. It would appear very unnatural (it may not even be possible to jump without bending your knees!). In the same way, animating movements without a flicker of anticipation will also make your motion seem awkward, stale and lifeless.

Staging 🔗

Staging in animation is a lot like composition in artwork. What we mean by that is, you should use motion to guide the viewer’s eye and draw attention to what’s important within the scene. Keep the focus on what’s important within the scene, and keep the motion of everything else of non-importance to a minimum.

Straight ahead action and pose to pose 🔗

There are two ways to handle drawing animation: straight ahead and pose to pose. Each has its own benefits, and the two approaches are often combined. Straight ahead action involves drawing frame-by-frame from start to finish. If you’re looking for fluid, realistic movements, 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. This technique gives you a bit more control within the scene and allows you to increase the dramatic effect of the motion.

Follow through and overlapping action 🔗

When objects come to a standstill after being in motion, different parts of the object will stop at different rates. Similarly, not everything on an object will move at the same rate. This forms the essence of the fifth of Disney’s principles of animation.

If your character is running across the scene, their arms and legs may be moving at a different rate from their head. This is overlapping action. Likewise, when they stop running, their hair will likely continue to move for a few frames before coming to rest – this is follow through. These are important principles to understand if you want your animation to flow realistically.

Slow in and slow out 🔗

The best way to understand slow in and slow out is to think about how a car starts up and stops. It will start moving slowly, before gaining momentum and speeding up. The reverse will happen when the car brakes. 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.

Arc 🔗

When working in animation, it’s best to stick with the laws of physics. Most objects follow an arc or a path when they’re moving, and your animations should reflect that arc. For example, when you toss a ball into the air, it follows a natural arc as the effects of the Earth’s gravity act upon it.

Secondary action 🔗

Secondary actions are used to support or emphasize the main action going on within a scene. 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.

Timing 🔗

For this principle of animation we need to look to the laws of physics again, and apply what we see in the natural world to our animations. In this case, the focus is on timing.

If you move an object more quickly or slowly than it would naturally move in the real world, the effect 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 (especially if you’re creating an imaginary world) – but if you do, be consistent.

Exaggeration 🔗

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.

Solid drawing 🔗

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.

Appeal 🔗

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.

Reference 🔗

This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.