The 12 Principles of Animation – A Brief History and Overview

If you are interested in design and animation or work in a field that uses animations, such as social media marketing or web design, you have likely come across the 12 principles of animation. And if you haven’t, it is almost impossible that you haven’t seen them applied dozens of times in your life. In this article, we’ll discuss the 12 principles followed by top social media marketing service provider, and website design service provider in USA where they came from, and their significance in modern app and web design.

History And Origin Of The 12 Principles Of Animation

The term Illusion of Life and the associated rules were coined during the Golden Age of American Animation in the 1930s by Disney’s Nine Old Men when creating iconic characters such as Donald Duck, Goofy, or Mickey Mouse. These principles of animation should be used to develop more realistic animation while respecting the fundamental laws of physics. In addition, more abstract aspects of the primary character creation, like “emotional timing” and “character appeal,” belong to these principles.

Initially, these rules were developed for hand-drawn animation and later adapted for computer animation. However, they still have high relevance for today’s animation in videos. In 1981, Frank Thomas and Ollie Johnston published the book “The Illusion of Life: Disney Animation,” which deals with the principles of natural movement in animation.

Even if it’s just a simple cube that is the central element of the animations below, you think you can immediately recognize the style of old Disney films. The exciting thing is that even in today’s elaborate CGI works, these rules still seem valid. The principles of animation ensure that designers can produce improved results that remain worthwhile even after several years. In addition, the same vital principles empower website layouts and logo design in the digital industry.

Let’s study these animation guidelines in more detail.

So, What Are The 12 Principles Of Animation?

Squeeze & Stretch (Squash & Stretch)

The shapes of the characters are compressed or stretched during a movement, whereby the overall volume must always be maintained. It represents the shape’s weight or external forces acting on the figure. Live objects always deform with a movement, such as the biceps during an arm flexion.

Reaching out or anticipating

It refers to anticipating character movements and covering them already in the design before they occur. Rebounding and running before a jump are excellent examples. They provide counter-movements that smooth out the animations. It makes the actual movements – in this instance, the throw or the run – easier to read and predict, making them appear more natural.

As a rule, a movement consists of three phases:

• Preparation of the action (anticipation)
• Action
• Completion of the action

Staging of the poses

The staging focuses both on the arrangement of the individual figures within the scene and the creation of unmistakably recognizable poses. The silhouette serves as a control aid for the animator. Ideally, the body expression is so unmistakable that the outline of a figure can recognize it. The idea is to enact an action, personality, or expression and draw the viewer’s attention to the point where the primary activity is happening. This principle of animation is employed across all types of digital media generation, including logos and videos.

Straight ahead & pose-to-pose animation

Among the principles of animation from Illusion of Life, this one is all about the sequential planning and construction of movements.

Straight-ahead animation begins with the first keyframe or drawing and continues to animate chronologically, frame by frame. This type of construction is beneficial for uncontrollable movements such as creating a blazing flame. Here, the animation typically uses physics principles. In comparison, pose-to-pose animation focuses primarily on the keyframes of a movement.

Let’s say we want to make a man jump over a chasm. Our keyframes are the start from point 1, the climax during the jump, and finally, the safe landing at point 2. Planning this animation straight ahead and creating each frame one at a time can quickly deform our character. Straight-ahead animations are more dynamic, while pose-to-pose animations are more controllable, making them suitable for more complex, multi-element movements.

Follow through & overlapping action

Follow Through is often used to describe how inanimate elements of characters, such as hair or worn clothing, follow a movement with a time lag during limb movements, then overshoot the end point of that movement to fall back into their resting position finally. In contrast, all dependent elements do not necessarily have to execute or complete a movement simultaneously with overlapping action. The definition boundary between Follow Through and Overlapping Action is often fluid.

Acceleration and deceleration (Slow in & Slow out)

This point from the principles of animation is based on the fact that few objects in nature can carry out actions linearly. Hence, most living things move in arcs. Defining a fixed pivot point is imperative to make a movement look natural and not mechanical. This principle of animation deals well with movements allowing objects to accelerate and decelerate around the defined pivots.

Secondary/Supporting movement 

Secondary Action movements usually begin slowly, then accelerate strongly, and then slowly decelerate again after the speed peak at the end. In concrete terms, this means more frames are used both at the beginning and at the end of a movement than in the middle.

Arcs

This principle is based on movements of a character, which happen simultaneously and support the actual main movement as a primary action. These helping movements are often used to add semantic emotion to the character.

Imagine a character walking from left to right can stomp the ground angrily as it does so or extra cautiously put one foot in front of the other to sneak.

Duration of movement (Timing)

The timing is decisive for the duration of movements and for the period between individual, independent movements. This aspect is highly dependent on the animator’s style and the characteristics of the depicted object. Principles of animation recommend that animators be aware of how fast or slow a character can move based on their body or weight. In addition, learn how fast or slow she executes movements due to her current emotion and how many frames are needed to display the period.

Exaggeration, caricature

To make the poses and movements of drawn characters, particularly clear, it is often necessary to exaggerate their appearance and movements. Here, you must check whether the exaggeration of the moves has a negative effect. The flow can quickly become hectic or imprecise through a caricature and distort the actual message of the scene.

Solid drawing

Here we focus on the drafter’s fundamental ability to draw consistent figures. The actual difficulty here is to always present a figure correctly in terms of proportion and perspective in different movements and perspectives without losing the qualities in the change.

Charisma, Charm, and Appeal

The last of these principles is about developing a character’s personality. Appeal describes that the character’s appearance and design, as well as their poses and movements, should be pleasing and appropriate to the character. Here, too, there is a lot of room for interpretation.

An evil character can appear beautiful but reveal true colors through their acting, while an ugly character can also become endearing through their appearance. In this case, however, the appeal does not automatically mean beauty but rather the attempt to effectively portray a character’s inner quality effectively and according to the character. In commercial design for businesses, you can imagine this as a part of the identity marketing of a brand.

Are the 12 Principles Of Animation Only A Disney Thing?

Not at all! These 12 principles of animation are used in many areas of design. Some of them are pretty far from animated movies, such as logo design or brand animations. Still, these rules are considered golden rules in the entire world of design.

These principles tell a beautify story of the early development of animation, told through the eyes of the men who, for decades, under Walt Disney’s leadership, took it to the highest technical heights of America’s golden age of animation. Frank Thomas and Ollie Johnson don’t just write anything in their book.

We have really learned a lot about how animation came about in the early days of the Disney studios and why we are still so fascinated by movement and animation. So, it is ideal for those interested in animation and those who intend to do so! Video animation or animated design is used widely in all possible fields, be it business, politics, or educational institutes, creating their campus identity.

Animation Principles Meet Social Media Design

Well, these fantastic principles are also applied daily in the design of websites and mobile apps. Of course, animations also play a vital role in creating social media content. Since moving images, in particular, are becoming increasingly relevant, the rules can also be directly applied to them.

Whether we are talking about short clips or commercial brand animation for websites, you can be sure that the designers regularly use the 12 principles of animation. In fact, designers use them for logos, websites, and mobile app design service provider all the time.

Conclusion

Thomas and Johnston laid the foundations for the most important and widely used principles of animation in their book, and it is impossible to ignore the principles they have discovered. The rules may originally have been relevant to movie animation and are key elements in classics, such as Fantasia, Pinocchio, Snow White, and other Disney classics.

However, now all other fields of design and animation use these principles. For example, social media marketing and design, logo design, brand identity, and marketing are some critical areas where these rules are practiced daily.

Unique Logo Designs has an experienced team of web and logo designers who employ the 12 principles of animation in their work structure. Contact us now for a suitable quote!