# 12 principles of animation Here are the famous 12 principles of animation outlined by Frank Thomas and Ollie Johnston in their book “The Illusion of Life”. Thomas and Johnston were chief animators for Disney during the golden age of animation, working on films like _Snow White and the Seven Dwarves_ and _Bambi_. They figured out the magic rules of motion that are considered the foundation of animation today. These principles apply equally for both traditional drawn animation or modern digital motion. This short video gives you a good introduction to the principles and is a wonderful example of how even a simple cube can become an engaging character: <div style="padding:56.25% 0 0 0;position:relative;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://player.vimeo.com/video/93206523?h=d496437eee" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div> _[The illusion of life](https://vimeo.com/93206523) from [cento lodigiani](https://vimeo.com/centodesign) on [Vimeo](https://vimeo.com)_ You can find an amazing breakdown of how to approach each of these principles in a [YouTube series](https://www.youtube.com/playlist?list=PL-bOh8btec4CXd2ya1NmSKpi92U_l6ZJd) by [Ernest Becker](https://www.youtube.com/user/AlanBeckerTutorials). --- ## 1. squash and stretch Objects squash and stretch in shape to indicate how the mass is being affected by forces like gravity, weight, and flexibility. The amount of squash and stretch gives a sense of what the object is made of. Big changes makes the object feel elastic like Jello while small changes make it feel like rigid metal. Even though the object is squishing around, make sure to keep the overall volume the same throughout the changes. If the object gets wider to show the squash, then the height needs to shrink to compensate. ## 2. anticipation This is a quick action that happens before the main action. It gives the viewer a sense of what is about to happen. A pitcher does a wind-up before throwing a ball or a jumper squats down before launching up. Anticipation isn’t reserved for just living things. Any moving object can have anticipation. Imagine a car doing a quick pull-back before zooming forward. Sometimes even the camera can have anticipation. Again, think of the camera view backing up a quick second before zooming in. Anticipation happens at the start of a motion. Something similar happens at the end of the motion. It is the [[12 principles of animation#5 follow through and overlapping action|follow through part of principle 5]]. ## 3. staging Staging is all about how the different objects in a scene are arranged to best convey the point of each shot. Overall composition, character poses, environment design, and camera angles are organized to focus on the important action without extra visual distraction. Personally, I believe this is one of the most important principles to be aware of. Each sequence/shot in a time-based piece serves an important part in telling the ongoing story. Good staging conveys the important point clearly so the viewer can follow the narrative. Bad staging leads to disruption and confusion, pulling the viewer out of the story. The idea of good staging is directly related to using [[12 principles of animation#10 exaggeration|exaggeration (principle 10)]] and [[12 principles of animation#12 appeal|appeal (principle 12)]]. ## 4. straight ahead action and pose to pose Animated sequences are created in two different ways: straight ahead action and pose to pose, also known as [[frame-by-frame and keyframing]]. Frame-by-frame is drawn one frame at a time from start to finish with the motion moving in a linear sequential flow. Pose to pose, in contrast, is drawn out of order starting with the big key poses followed by in-between frames transitioning from one pose to the next. Neither technique is necessarily better than the other, although pose to pose is usually the standard approach because it allows for more flexibility and control. With digital animation programs, it is possible to draw only the key poses with the computer filling in the in-between frames. ## 5. follow through and overlapping action Overlapping action is the fancy way of saying the different parts that make up an object don’t necessarily move at the same time and they affect how each other moves. For example, a pitcher throwing a ball will lead with the hand holding the ball which pulls the elbow and shoulder around. All the parts are moving at the same time but in different ways and for different reasons. Follow through is about what happens when something stops moving. It is the opposite concept of [[12 principles of animation#3 staging|staging in principle 3]]. Different parts of an object will continue moving after the object stops giving an indication of materials and connection to the main object. For example, the pitcher throwing the ball in the example above will continue swinging his arm after releasing the ball. If he has a loose shirt on, it might continue flowing forward even after his arm stops. Everything eventually comes to a stop but not at the same time. ## 6. slow in and slow out Another principle related to how motion starts and stops. No object ever goes from standing still directly to full-speed. There’s a transition as the object slowly gets up to speed. It may be a quick jump or a slow easing into the motion, but it does take time to happen. Similarly, no object goes directly from full-speed to full-stop. There’s a transition period as the object comes to rest. The action can be indicated with [[12 principles of animation#5 follow through and overlapping action|follow through in principle 5]]. A hard-brake will happen quickly and there will be plenty of overlapping action as loosely connected elements will fly forward before bouncing back to a stop. A gentle slowing will take longer and there will be less follow through of connected elements. You can learn more about how this is handled in [[five types of motion & easing]]. ## 7. arc In the real world, things move in curved arcs. A swinging arm is hinged at the shoulder and moves in a circle. A thrown ball follows a curve as it raises up into the air and falls back down due to gravity. Putting objects in motion following curves appears more natural and organic and less mechanically robotic. ## 8. secondary action Secondary actions are the extra movements that add complexity and visual interest to a primary action. It can be subtle movement like hair bouncing while someone walks or larger motions like a person sticking their hands in pockets while walking along. These secondary actions can help indicate the mood or attitude of the character. ## 9. timing Actions and movement take time to happen. Playing with that timing can help indicate weight or speed or even attitude. Slow movement could indicate heaviness or sluggishness while quick movement could imply lightness or high-energy. Real life actions have set amounts of time to happen. We have a natural understanding of how long things take, whether is dropping a ball or opening a jar of peanut butter. A running person will reach a destination quicker than a walking person. Playing with the speed of that movement in relation to real time can make a person seem unrealistically fast or geologically slow. ## 10. exaggeration Since animation isn’t necessarily based in reality, you can have exaggerated motions, expressions, and poses that would never be possible. Making things bigger, faster, and more dynamic just makes everything better. Of course, it can also work with making things slower and smaller than reality as well. The idea of exaggeration is to push reality to help further the point of the story being told. Imagine a sad person so completely caved in on themselves that they are folded over and can barely move. A happy person might be bouncing along so jauntily that they actually float into the air with each step they take. This is reality taken to the next level. I think this is one of the most powerful principles to be used. Animation allows us to intensify everything to further the narrative, so push wherever you can. Make the bad guy such an evil character that viewers despise him. Don’t make someone hop over a fence if they can take a flying leap instead. If someone is getting hit, make their head snap backward and their body crash into a brick wall so hard it collapses. ## 11. solid drawing Solid drawing refers to the idea that objects take up space in an environment and affect how other objects fit into the space. They have weight and volume and are made of different materials. They have internal structure and anatomy. Basically, objects need to feel like they fit together in a functional universe. Alternatively, solid drawing can also refer to how the objects are drawn and posed to help further the narrative being told. Bold poses with good silhouettes will convey an action and attitude better than loose and inconclusive poses. Related to exaggeration in principle 10 above, good illustrations will indicate exactly what a character is feeling or how an object fits into the landscape. ## 12. appeal To make an appealing animation is to have engaging characters, environments, and motions that capture the attention of the viewer. This is about empathy and interest that makes viewers care about what is happening in the story and want to know how it will turn out. Everything from characters to movements should have personality and charisma. This doesn’t mean things need to be cute and fuzzy to be appealing. A well-made bad guy that everyone hates elicits a response in the viewer that makes everyone care that much more for the protagonist. The bad guy serves a purpose in the story so make them the best, most evil bad guy you can. Appeal is hard to define and even harder to achieve. It takes time and effort to create appealing animations that engage the viewers. Keep at it, though, the effort is worth it. --- Learn more… - [understand the 12 principles of animation from creative bloq](https://www.creativebloq.com/advice/understand-the-12-principles-of-animation) - [disney animation principles from cgtarian](https://www.cgtarian.com/animation-tutorials/disney-animation-principles.html) --- tags: #animation #resources home: [[! animation]]