Art History Lab

Unleashing the Magic: The 12 Principles of Animation Demystified

Animation is an art form that has been a critical part of entertainment for decades. Whether it’s cartoons, advertisements, or movies, the animation industry has been a source of awe and inspiration, captivating viewers of all ages.

But what makes animation so fascinating, and how did it all get started? The answer lies in the 12 Principles of Animation, a set of rules developed by Disney animators Frank Thomas and Ollie Johnston that have become the foundation of all animation.

In this article, we’ll explore the 12 Principles of Animation and delve into the Squash and Stretch principle in particular.

Importance of the 12 Principles of Animation

The 12 Principles of Animation are essential guidelines for all types of animation, from traditional hand-drawn cartoons to modern computer-generated imagery (CGI). These principles are vital techniques that all animators must master to create compelling and believable animations.

Disney animators created the 12 Principles of Animation to help establish a thoughtful process, giving meaning to what animators do. These principles have enabled animators around the world to create engaging and believable characters and environments, breathing life into these worlds.

The 12 Principles of Animation are considered vital for any animator who wishes to become successful. With the principles, animators can produce life-like movements that audiences can relate to and appreciate.

The origins and development of the 12 Principles of Animation

The 12 Principles of Animation began to take form during the 1930s at Disney Studios. Disney animators Frank Thomas and Ollie Johnston created these principles and wrote about them in their book, “The Illusion of Life.” In it, they described how animators can create lifelike movements by carefully considering these principles.

In the years that followed, the 12 Principles of Animation became a cornerstone of commercial animation, taught to every animation student as soon as they enroll. The principles helped to leapfrog the animation industry into the realm of believable animation that captivates audiences and sets the standard for what animation could be.

These principles are still relevant today, even in web design. The same principles that make an animated movie character believable are what make a website feel interactive and engaging.

For example, the “Squash and Stretch” principle is still relevant when designing web components, like buttons, that respond to user input.

Squash and Stretch Animation Principle

The “Squash and Stretch” principle is one of the most used and abused of the 12 Principles of Animation. Although it’s one of the most commonly used and basic of the principles, many animators don’t fully understand the purpose of it.

Squash and stretch relate to the flexibility of an object under pressure. Squash and stretch refer to exaggerating the shape of an object to make it appear more life-like.

This principle is essential because it gives objects a sense of weight, mass, and gravity that they wouldn’t otherwise have. A bouncing ball, for example, is a classic example that showcases the use of the squash and stretch principle in animation successfully.

Consistency and flexibility in maintaining weight and volume

A crucial aspect of utilizing the Squash and Stretch principle is to maintain consistency between the two. Consistency ensures that the animated object feels lifelike and follows the laws of physics.

For example, when you squash or stretch a ball, the mass and weight of the ball should not vary significantly, or it will appear less lifelike. Therefore, animators must keep track of an object’s position, size, shape, and mass to maintain consistency.

The flexibility of the object also plays an important role in making the animation look life-like. For example, if an object is heavy, then it would be difficult to stretch it out thin.

An animator must be aware of the object’s flexibility and ensure that it adheres to the principles of the real world.


The 12 Principles of Animation are a crucial foundation for any animator looking to create engaging and life-like animations. Although all the principles are essential, Squash and Stretch is fundamental to creating a lifelike, interactive, and engaging animation.

Thanks to the principles, animators can breathe life into characters and environments, captivating audiences with the art of animation.

Anticipation Animation Principle

Anticipation is an animation principle that helps make character or object movements more realistic. It involves preparing and setting up the action before the main action occurs.

Anticipation acts as a buffer between two actions, informing the audience of what might come next and making the character’s movement more realistic.

Role of anticipation in making character actions more realistic

In animation, anticipation is used to create realistic sensations in movement. It is the preparation or warning one action gives before another action occurs.

Anticipation adds depth and weight to animation by making it seem more lifelike, and reducing the likelihood of abrupt, unnatural movements. A typical example of anticipation involves bending the knees before jumping.

This bending process loads energy into the character, anticipating the upcoming jump. Anticipation is an essential principle because it gives the audience a preview of the action that is about to occur, making what follows appear more set up and deliberate.

Examples and importance of anticipation in animation

Anticipation is essential in 2D and 3D animation. In 2D animation, anticipation is used to create the illusion of weight and physics.

Before a character jumps, there is a short pause where the character’s knees bend as they prepare for the leap. This pause allows the audience enough time to anticipate the upcoming action.

In 3D animation, anticipation is just as vital, and the principle is applied to give life to the cinematic scenes. When a character is about to punch, they will pull back their fist before the impact.

This action acts as a means of signaling what is to come and helps make the punch seem more realistic. Anticipation is critical in animation because it gives the audience more time to connect with the character and understand the action, making the overall movement of the character appear more realistic.

Staging Animation Principle

Staging is a fundamental animation principle that involves arranging the visual elements within a scene to direct the audience’s attention. Staging is about composition and is akin to composing a painting.

Composing a painting involves arranging shapes, colors, and values to create an image that conveys a message. Similarly, staging in animation involves arranging the visual elements in a shot to create a clear message.

Comparison of staging in animation to composing in artwork

In animation, staging is used to help the audience focus on the most important action occurring in a scene. The staging of an animation shot directs the audience to the main action, while non-important actions are pushed into the background, effectively creating motion focus.

In the same way, composing in artwork is used to create focus on the main subject and avoid unnecessary distractions.

Clear communication through staging

Staging improves the clarity and communication of a scene, making it easier for the audience to understand what is happening. The positioning of the characters, the objects, and the camera also affect the overall mood of the animation.

The background is also an important element of staging, as it can add depth and context to the scene.

Creating clear and focused scenes with staging

Staging is essential in creating clear and focused scenes in animation. The basic element of setting up a scene is to decide what is essential to the story.

Once the essentials are identified, the animator must make sure every element within the scene supports the story, mood, and attention to detail. By placing the elements in the foreground and background according to their importance, animators can create an appealing and readable image.

The animator also has to be careful not to add too many details that could confuse the viewer.


Anticipation and staging are both fundamental principles of animation. While anticipation creates a buffer between two actions, staging helps direct the audience’s attention by arranging the visual elements in a scene.

Animators can create clear and engaging animations by focusing on these principles and keeping them in mind when creating animations. By using these principles, animators can create animations that are more pronounced, lively, and engaging.

Straight Ahead Action and Pose-to-Pose Animation Principle

Straight Ahead action and Pose-to-Pose animation principles are both methods used in animation. They are both important and useful techniques that animators apply to create movement and sequences of actions.

Explanation of straight-ahead technique and its advantages

The Straight Ahead technique is a frame-by-frame approach in which the animator creates the scenes frame by frame. With this technique, animators work from the first frame to the last frame, creating a spontaneous and realistic movement.

Straight Ahead technique allows for spontaneity in the animation and lets the animator define the animation’s mood. The advantage of straight-ahead action animation is that it creates a realistic movement that is difficult to control.

The animator has to be able to visualize in advance how the movement will progress, only working one frame at a time. This animation method is perfect for making movements feel realistic, giving the illusion of an unscripted movement.

Explanation of pose-to-pose technique and its advantages

Pose-to-Pose Animation technique is an animation technique where the animator works on predetermined frames or poses. The animator works on the starting frame, the ending frame, and a few more frames in between them.

These frames or poses are called keyframes. The advantage of pose-to-pose animation is that it gives the animator more control over the outcome.

The animator can set the keyframes at specific intervals in the animation process, thus having control over the animation’s pacing and dramatic effect. This technique is perfect for creating movements that need to be accurate and require a specific sequence of events.

Ease In, Ease Out Animation Principle

Ease In and Ease Out Animation Principle is used in animation to create natural movements. The principle emphasizes the importance of acceleration and deceleration in movements, ensuring that actions do not appear robotic or unnatural.

The application of this principle produces a more organic, life-like animation that engages the audience.

Importance of Ease In and Ease Out in creating natural movements

Without the application of Ease In and Ease Out animation principle, the movement in animation may appear robotic or unnatural. Acceleration and deceleration are vital to creating natural-looking movements in animation.

It emphasizes the distinction between starting, continuing, and slowing down.

Application and Examples of Ease In and Ease Out in animation

The Ease In and Ease Out principle is often used in car animations. When a car starts moving, the movement begins with a slow acceleration, gradually building momentum until it reaches a stable speed.

When a car stops, the movement is decelerated, coming to a smooth stop. The Ease In and Ease Out principle is used to ensure that the car movement appears natural and life-like.

The ease in and ease out principle is also used in stop-motion animation or when creating action blur. Action blur is created by duplicating and animating multiple instances of objects to produce the effect of motion blur.

In this case, the Ease In and Ease out principle can be applied to ensure that each sequence retains the proper timing, producing a seamless blur effect.


The Straight Ahead action and Pose-to-Pose animation principles are techniques that animators can use to create both spontaneous and controlled movements. The application of the Ease In and Ease Out Animation Principle has provided a more natural, life-like movement in animation.

The use of these principles is essential in developing an animation that is both interesting and realistic. By understanding these principles, animators can achieve a more dynamic animation that holds the audience’s attention.

Follow-Through and Overlapping Action Animation Principle

The principles of Follow-Through and Overlapping Action are essential in creating movement-based animations that obey the laws of physics and appear realistic. When these principles are applied effectively, they add depth and believability to an animated sequence.

Explanation of follow-through and overlapping action principles and their effects on realism

Follow-Through and Overlapping Action are principles that deal with the way different parts of an object or character move individually and at different times. These principles create the illusion that the various parts of the object have inertia and continue moving after the initial action has stopped.

Follow-Through refers to the tendency of an object or character to continue moving even after the main action has stopped. For example, when a character runs and suddenly stops, their hair may continue to sway forward before settling back into place.

This principle makes the animation feel more realistic by mimicking how objects in the real world behave. Overlapping Action, on the other hand, is the principle of different parts of an object or character moving at different times.

For instance, when a character is waving their arms, the arms may move slightly ahead of or behind the rest of the body. This principle accentuates the sense of weight and adds a natural flow to the animation.

Examples of follow-through and overlapping action in animation

Follow-Through and Overlapping Action can be observed in various elements of animation. For instance, when a running character comes to a sudden stop, their body may continue moving forward for a bit before being pulled back by the force of the stop.

Additionally, the character’s hair, clothing, and other accessories may follow the laws of physics and take a moment to settle into place after the stop. Another example is when a character is landing from a jump.

As they land, their body may continue to bounce slightly in reaction to the landing impact. This follow-through motion creates a more realistic animation, as the character’s body obeys the laws of physics and reacts accordingly.

Secondary Action Animation Principle

Secondary Action is the principle of adding gesture or subtle movement to support the main action of a character. These secondary movements enrich the character’s performance, add depth to the animation, and provide further insight into the character’s personality.

Importance of secondary actions in supporting main actions and adding depth

Secondary actions play a crucial role in supporting the main actions of a character and adding depth to the animation. They provide additional context, enhance the character’s emotions, and convey subtle nuances that enrich the overall performance.

For example, a character may shrug their shoulders or gesture with their hands while delivering a line of dialogue, expressing further emotion and giving the audience insight into their thoughts or intentions. By incorporating secondary actions, animators can provide a more well-rounded and dynamic performance, making the character feel more alive and relatable.

Balance between subtle secondary actions and main actions

Finding the right balance between subtle secondary actions and main actions is key to creating a compelling animation without distracting from the main focus. The secondary actions should enhance and enrich the main actions, rather than draw attention away from them.

Subtlety is often key in ensuring that the secondary actions support the main actions without overpowering or overshadowing them. The purpose of secondary actions is to add depth and complexity to the character’s movements, not to distract or confuse the audience.

Animators must carefully consider the timing and subtlety of secondary actions to create a cohesive and solid animation.


The principles of Follow-Through and Overlapping Action, as well as Secondary Action, are vital in creating realistic and engaging animations. The application of these principles adds depth, weight, and believability to character movements and actions.

By understanding and applying these principles effectively, animators can bring their animations to life, captivating audiences and immersing them in dynamic and believable animated worlds.

Arc Animation Principle


Arc Animation Principle is a fundamental guideline used by animators to create natural and realistic movement by following curved or arcing motion paths. This principle ensures that movements flow smoothly and adhere to the laws of physics, resulting in animations that are visually appealing and believable.

Natural movement in animation following curved or arc motion

In nature, almost all forms of movement follow a curved or arcing path. This is because our bodies are interconnected and joints allow for fluid movement.

The same principle holds true in animation, where following an arc motion path creates a smoother and more realistic movement. When an animator chooses to create movements along arcs, it gives the illusion of a natural flow that mimics real-world physics.

Whether it’s the swing of a pendulum, the trajectory of a thrown object, or the walk of a character, animating along arcs adds a sense of realism and organic beauty to the animation.

Examples and applications of the arc principle in animation

One of the most common examples of the application of the

Arc Animation Principle is with a bouncing ball. When a ball bounces, it follows an arc trajectory as it moves up and down.

By animating the ball’s movement along an arc, it ensures that the animation is visually appealing and realistic. Another example is with the walking motion of a character.

When a character takes a step, their leg swings forward in an arc, almost like a pendulum. By animating the leg’s movement along an arc, it creates a more natural and convincing walk cycle.

Even simple actions like head turning can benefit from the

Arc Animation Principle. When a character turns their head, it tends to follow an arc path rather than a straight line.

By animating the head movement along an arc, it gives the character a more lifelike appearance and adds fluidity to the animation.

Timing and Spacing Animation Principle

Timing and Spacing are crucial principles in animation as they govern the speed and rhythm of movements, making them appear realistic and believable. Proper timing and spacing create an illusion of movement that adheres to the laws of physics and captivates the audience.

Importance of timing and spacing in creating realistic movement

Timing refers to the placement and duration of keyframes or poses in an animation, while spacing refers to the distribution of those keyframes throughout the animation. Timing and spacing control the speed, acceleration, and rhythm of movements, ensuring that they are consistent with real-world physics.

Without proper timing and spacing, animations can appear jittery, rushed, or floaty, resulting in a less believable final product. Timing and spacing are crucial in creating realistic movement, as they dictate how objects or characters accelerate, decelerate, and move through space.

By carefully orchestrating timing and spacing, animators give their animations a sense of weight, physics, and believability. Relationship between timing, spacing, and actions in animation

The relationship between timing, spacing, and actions in animation can best be understood through an example.

Consider a bouncing ball. When the ball is dropped, it accelerates downwards, reaching its highest point in the center of the movement arc.

As it falls back down, the spacing of the keyframes or poses becomes smaller and closer together, mimicking the effect of increased speed due to acceleration. Then, as it reaches the ground, the spacing increases as the ball decelerates, coming to a brief pause before bouncing back up.

This relationship between timing, spacing, and the action of the bouncing ball can also be seen in an ant crawling compared to an elephant walking. The ant’s movements are rapid, and the keyframes are spaced closer together, while the elephant’s movements are slower, with more spacing between keyframes.

By adjusting timing and spacing, animators can accurately depict the relative speed and weight of different actions and characters.


The principles of Arc Animation, Timing, and Spacing are essential tools for animators to create realistic and visually appealing animations. By following arc motion paths, animators can achieve natural movement that adheres to the laws of physics.

Furthermore, by mastering timing and spacing, animators can control the speed and rhythm of movements, making them appear realistic and captivating. Understanding and applying these principles effectively allows animators to create compelling animations that engage and captivate the audience.

Exaggeration Animation Principle


Exaggeration Animation Principle is a technique used by animators to enhance the dynamics and interest in their animations. Exaggerating certain aspects of a character, movement, or expression can create a more captivating and visually appealing animation.

Purpose of exaggeration in making animation more dynamic and interesting

While realism is often sought after in animation, adhering strictly to real-world physics and limitations can sometimes result in boredom or lack of interest. Exaggeration offers a way to break free from strict realism and inject excitement, energy, and entertainment value into the animation.

Exaggeration allows animators to push the boundaries and emphasize certain elements. By stretching or distorting proportions, actions, or expressions, animators can create a sense of extreme and amplify the impact of the animation.

This dramatic effect captures the viewer’s attention and makes the animation more dynamic and visually engaging.

Examples and effects of exaggeration in animation

Exaggeration can be applied in various ways within an animation. For instance, a crying character can have exaggerated tears that are larger and more abundant than what would be considered realistic.

This not only adds emphasis to the character’s emotional state, but it also creates a more visually striking and expressive image. Another example is an expression of surprise.

By exaggerating the eye size or mouth opening, the sense of surprise becomes amplified. This exaggeration creates a strong visual impact and effectively conveys the intensity of the character’s emotion.

These examples demonstrate how exaggeration adds interest, flair, and excitement to animation by going beyond what is strictly realistic and capturing the audience’s attention.

Appeal Animation Principle


Appeal Animation Principle focuses on the importance of creating characters that are visually appealing, interesting, and charismatic. Characters with strong appeal grab the attention of the audience and keep them invested in the animation.

Importance of creating appealing and interesting characters in animation

Creating appealing and interesting characters is vital in animation as they are the driving force behind engaging storytelling. Characters with charisma and appeal are memorable and connect with the audience on a deeper level.

They evoke emotions, captivate attention, and invite the audience to invest in their journey. When characters lack appeal, the animation can feel dull or forgettable.

Well-designed characters with appeal, on the other hand, draw the viewer into the animation, making them emotionally invested and more likely to stay engaged throughout.

Factors to consider in creating appealing characters

Designing appealing characters involves considering several factors. Firstly, well-defined and easy-to-read designs are crucial.

Characters with distinct silhouettes and recognizable features are visually appealing and easily identifiable. The shape of a character can play a significant role in its appeal.

Smooth curves and balanced proportions can contribute to a visually pleasing design, while jagged or asymmetric shapes can create a sense of intrigue and interest. Additionally, a character’s behavior and personality greatly impact their appeal.

Characters with unique personalities, quirks, and mannerisms make them more relatable and memorable. Moreover, solid and consistent animation drawings play a vital role in bringing a character to life, conveying their charisma and appeal in every movement.


The Exaggeration and

Appeal Animation Principles play key roles in creating captivating and visually appealing animations. Exaggeration allows animators to push the boundaries of realism and inject excitement and interest into their animations.

It amplifies specific elements to make them more visually striking and dynamic. Meanwhile, appeal is crucial in creating characters that draw attention and captivate the audience.

Well-designed, charismatic characters connect with viewers on an emotional level and make the animation more engaging and memorable. Mastering these principles provides animators with powerful tools to bring their animations to life in a way that resonates with and delights audiences.

Solid Drawing Animation Principle


Solid Drawing Animation Principle is a fundamental aspect of animation that focuses on creating characters and objects that feel three-dimensional, have weight, and adhere to the laws of physics. Solid drawing plays a vital role in bringing realism and believability to animated sequences.

Understanding the importance of solid drawing in creating realistic animation

Solid drawing is crucial in animation as it establishes a sense of depth, weight, and volume. It involves understanding and applying the principles of anatomy, balance, and the behavior of light and shadows.

By considering these factors, animators can create characters and objects that feel grounded in reality and interact with their environment in a believable manner. When animators master solid drawing, they can create animations where characters and objects move in a way that aligns with the laws of physics.

This attention to detail adds a sense of realism that captivates the audience, immersing them in the world of the animation.

Relevance of solid drawing in traditional animation and its challenges in computer animation

Solid drawing is especially relevant in traditional animation, where each frame is hand-drawn. Animators carefully craft each pose, ensuring that characters, objects, and their movements accurately portray their three-dimensionality.

The animator’s ability to draw with solidity and volume brings life to the animation, allowing viewers to believe in the existence and actions of the characters. In contrast, computer animation presents unique challenges to achieving solid drawing.

In computer-generated animation, the characters and objects are built and manipulated digitally. While advancements in technology have improved the ability to create realistic-looking animations, simulating the depth, weight, and volume of hand-drawn animation remains a challenge.

Computer animation often relies on modeling techniques and algorithms to create the illusion of solid drawing. Animators must carefully consider factors such as lighting, shading, and camera angles to give the illusion of depth and three-dimensionality.

This requires understanding the principles of solid drawing and applying them within the digital medium to create convincing and realistic animations. Despite the challenges, computer animation has made great strides in emulating solid drawing.

Through advances in techniques like rigging, digital sculpting, and texture mapping, computer animators are able to create characters and objects that possess depth and weight. Three-dimensional models can be manipulated in ways that mimic the principles of solid drawing, adding a level of realism that was once only achievable through traditional animation.



Solid Drawing Animation Principle is a foundational aspect of animation that is crucial in creating realistic and believable characters and objects. By understanding the principles of anatomy, balance, weight, and the behavior of light and shadows, animators can bring depth, volume, and three-dimensionality to their animations.

While traditional animation relies heavily on solid drawing to capture these qualities, computer animation poses unique challenges. However, with the advancements in technology, computer animators are now able to achieve solid drawing effects, bringing a level of realism and believability to digital animations.

Mastering the principles of solid drawing allows animators to create animations that captivate and engage audiences, transporting them into dynamic and immersive animated worlds. In conclusion, the principles of animation discussed in this article, such as the 12 Principles of Animation, Squash and Stretch, Anticipation, Staging, Secondary Action, Ease In and Ease Out, Follow-Through and Overlapping Action, Arc, Timing and Spacing, Exaggeration, Appeal, and Solid Drawing, are essential tools for animators to create captivating and realistic animations.

By understanding and applying these principles, animators can breathe life into their characters, create engaging and believable movements, and immerse the audience in dynamic and visually appealing animated worlds. Whether working in traditional or computer animation, these principles provide a foundation for creating animations that captivate, entertain, and leave a lasting impression on viewers.

Mastering these principles allows animators to unlock the full potential of their craft and create animations that resonate deeply with audiences.

Popular Posts