The 12 Principles of Animation, Explained (With Examples)

If you have spent any time in animation, you have probably heard of the 12 principles of animation. They were originally created for traditional hand-drawn animation, but they are still just as useful today across motion graphics, UI animation, SaaS explainers, product videos, and 3D work.

At Motion The Agency, we are not sitting there checking off all 12 principles every time we animate a scene. Instead, they work more like a shared foundation in the background. They help us understand why a movement feels smooth, why something feels slightly off, or why a scene is not guiding the viewer’s attention as clearly as it should.

They become especially useful when a movement feels too stiff, too fast, or a little unnatural. That is often when we return to principles like timing, anticipation, follow-through, or slow in and slow out to figure out what needs adjusting.

As Adi, one of our senior motion designers, explained:

“They are not something we consciously think about all the time, but there are definitely moments when we come back to them, especially when a movement does not feel smooth or natural enough.” Adi Rachman, Senior Motion Designer at Motion The Agency

In this article, we will look at where the 12 principles came from, what each one means, and how ideas created for hand-drawn animation still help modern motion designers produce work that feels smoother, clearer, and more polished.

What are the 12 principles of animation?

The 12 principles of animation are a set of techniques that help movement feel clearer, smoother, and more believable. They are not just about making animation look good. They help communicate weight, emotion, timing, and intention, so the audience can easily understand what is happening on screen.

Before we go further, it is worth clarifying that this article focuses on animation rather than motion graphics. The two are closely related and often overlap, but they are not exactly the same. Animation is mainly concerned with how characters, objects, and ideas move, while motion graphics usually focuses more on animated text, shapes, branding, and visual information. Some of the principles still apply to both, but here we are looking at them through the lens of animation.

The principles grew out of a problem Disney’s animators were trying to solve. Their characters could bend, stretch, and move in lively ways, but they did not always feel believable. The movement often lacked real weight, emotion, and personality. To improve it, the team studied human anatomy, acting, facial expressions, gravity, and the way people and objects move in real life.

Through years of testing and observation, Disney’s animators developed techniques that made their drawings feel more natural, expressive, and alive. Frank Thomas and Ollie Johnston later organised these ideas in their 1981 book, The Illusion of Life. Although the principles were originally created for hand-drawn animation, they are still used today across 2D animation, 3D animation, UI animation, product videos, and, in some cases, motion graphics.

Together, these techniques became the 12 principles we know today. Here is what each one means and how it applies to modern animation.

The 12 principles of animation

1. Squash and stretch

• Definition: Squash and stretch is when an object changes shape as it moves. It may squash when it lands or receives an impact, then stretch as it moves quickly or bounces back. The object should usually keep the same overall volume, so it does not look like it is randomly growing or shrinking.
• Why it matters: It gives movement a stronger sense of weight, flexibility, and force. Without it, objects can feel stiff, flat, or disconnected from the movement around them. The amount of squash and stretch can also tell us what something is made of: a rubber ball will change shape much more than a metal object.
• Modern example: In UI animation, a button might compress slightly when clicked before returning to its original shape. In motion graphics, an icon may stretch as it moves quickly across the screen before settling into place.

2. Anticipation

• Definition: Anticipation is a small movement that happens just before the main action. It gives the audience a quick signal about what is about to happen, such as a character bending their knees before jumping or an object moving backwards before shooting forwards.
• Why it matters: It makes actions feel clearer, smoother, and less sudden. Without anticipation, movement can feel abrupt or confusing because the viewer has no time to prepare for it.
• Modern example: In UI animation, a card might pull back slightly before swiping away. A button could also react briefly before opening a new panel, making the interaction feel more natural and responsive.

3. Staging

• Definition: Staging is about making sure the viewer knows exactly where to look and what to focus on in a scene. This can be done through composition, contrast, scale, lighting, colour, or by controlling which elements move first.
• Why it matters: Even a well-animated scene can feel confusing if too many things are competing for attention. Good staging keeps the message clear and helps the audience understand each idea in the right order.
• Modern example: In a SaaS product video, the background might dim while one feature is highlighted. Other elements can stay still or fade back so the viewer remains focused on the part being explained.

4. Straight-ahead and pose-to-pose

• Definition: These are two different ways of creating animation. Straight-ahead animation is built frame by frame from beginning to end, which can make movement feel more spontaneous and unpredictable. Pose-to-pose animation starts with the most important positions first, then fills in the movement between them.
• Why it matters: Straight-ahead animation works well when motion needs to feel loose, fluid, or organic. Pose-to-pose gives the animator more control over timing, composition, and the overall structure of a scene. In practice, many animators combine both methods.
• Modern example: Particles, smoke, or flowing shapes may be animated straight ahead to keep the movement organic. A product walkthrough, on the other hand, is usually planned pose-to-pose so each feature appears in the right place and at the right time.

5. Follow-through and overlapping action

• Definition: These two ideas describe what happens when different parts of an object do not move or stop at exactly the same time. Follow-through means some parts continue moving after the main action has stopped, while overlapping action means different parts move at slightly different speeds.
• Why it matters: In real life, movement is rarely perfectly uniform. Hair, clothing, limbs, or smaller details usually react a moment later. Adding this delay gives animation more weight and flow instead of making everything feel stiff or robotic.
• Modern example: In UI animation, a card may slide into place first, followed by the text and icons settling a fraction of a second later. In motion graphics, a smaller decorative element might continue to bounce or sway after the main shape stops.

6. Slow in and slow out

• Definition: Slow in and slow out means movement starts gradually, speeds up in the middle, and slows down again before stopping.
• Why it matters: Most objects do not start or stop instantly in real life. Gradual acceleration and deceleration make movement feel smoother, more controlled, and less mechanical.
• Modern example: In UI animation, a menu might ease open and gently settle into place instead of snapping from closed to fully open. The same principle can be used when cards, text, or icons enter and leave the screen.

7. Arcs

• Definition: Arcs mean that movement follows a curved path rather than travelling in a perfectly straight line. This is especially common in natural movement because arms, legs, heads, and other body parts rotate around joints.
• Why it matters: Curved movement usually feels smoother and more believable. When natural actions move in straight lines, they can look stiff or robotic unless that effect is intentional.
• Modern example: In UI animation, a notification icon might swing into position along a gentle curve. In motion graphics, text or shapes can enter along an arc to make the transition feel more fluid and dynamic.

8. Secondary action

• Definition: Secondary action is a smaller movement that supports the main action. It adds extra detail or personality without becoming the main focus of the scene.
• Why it matters: It makes animation feel richer and more natural while reinforcing the main message. However, it should remain subtle enough that it does not distract the viewer from the primary action.
• Modern example: In UI animation, a success tick might appear while a card gently lifts and settles back into place. In character animation, someone could point towards a statistic while their expression changes slightly to support the message.

9. Timing

• Definition: Timing controls how quickly or slowly an action happens, as well as how long the viewer has to register it. Even the same movement can feel completely different depending on its speed.
• Why it matters: Timing helps communicate weight, mood, urgency, and importance. Faster movement can feel energetic or urgent, while slower movement can feel heavier, calmer, or more premium. Good timing also gives the audience enough time to understand what is happening.
• Modern example: A premium brand may use slower, more controlled transitions, while a social ad may use faster cuts and movement to hold attention. In a product video, an important feature may stay on screen slightly longer so the viewer has time to take it in.

10. Exaggeration

• Definition: Exaggeration means pushing an action, expression, or visual idea further than it would normally go so the message is easier to notice and understand. It does not always have to feel dramatic or cartoonish; even a small increase in scale, speed, or movement can make an idea clearer.
• Why it matters: Realistic movement can sometimes feel too subtle on screen, especially when the audience only has a few seconds to understand what is happening. Exaggeration helps important moments land more strongly and gives the animation more energy and personality.
• Modern example: In a product video, an important statistic might grow larger than the other elements to draw attention to it. In UI animation, a success icon could bounce slightly when a task is completed, making the action feel more noticeable and satisfying.

11. Solid drawing

• Definition: Solid drawing is about making characters and objects feel like they have real shape, balance, weight, and volume. Even in a flat 2D style, the design should still feel believable from different angles and move consistently through space.
• Why it matters: Without a strong sense of form and perspective, animation can feel flat, unstable, or visually confusing. Solid drawing helps objects keep their structure as they move, rotate, or change position.
• Modern example: In a product video, a UI card might rotate with believable depth and perspective instead of looking like a flat image being stretched. The same principle helps 3D icons, devices, and interface elements feel more polished and physically consistent.

12. Appeal

• Definition: Appeal is what makes a character, object, or visual feel interesting, clear, and memorable. It does not have to mean cute or colourful. It can come from strong design, clear shapes, good composition, or a distinctive visual style.
• Why it matters: Animation is easier to connect with when the visuals feel intentional and engaging. Strong appeal helps hold the viewer’s attention and makes the work feel more polished, recognisable, and aligned with the brand.
• Modern example: In a SaaS explainer, appeal might come from clear typography, well-designed UI, and distinctive branded motion. Even a simple icon or product screen can feel memorable when the movement and visual style work well together.

How these principles apply to modern motion design

Earlier, we mentioned that the 12 principles of animation were developed in the 1920s and 1930s, mainly for traditional hand-drawn animation. So, it is fair to ask whether they still hold up today or whether they only apply to older animation styles.

In this section, we will look at how those same principles still show up in modern animation, from motion graphics and UI animation to 3D work, SaaS explainers, and product videos. The tools and styles may have changed, but the thinking behind good movement is still very much the same.

In 3D animation, principles such as timing, arcs, follow-through, and squash and stretch help characters and objects feel like they have real weight. When a scene includes a lot of movement, animators often lean a little more on squash and stretch to show the force behind an action. A character landing, an object bouncing, or a product dropping into place might compress or stretch slightly before returning to its original form. Without those details, even technically smooth 3D animation can feel rigid or weightless.

In motion graphics, staging and timing help control where the viewer looks and when. A scene might include text, icons, statistics, and shapes, but everything cannot move at the same time. Each element needs to appear in the right order, giving the audience enough time to understand one idea before moving on to the next.

UI animation can be a little trickier because a stylised interface does not physically exist in the real world. Even so, the movement still needs to feel like something has actually happened to the object on screen. That is where follow-through and overlapping action become especially useful. A panel might stop moving first, while its text, icons, or smaller details settle a fraction of a second later. These small delays make the interaction feel less flat and mechanical and give it a clearer sense of cause, response, and weight.

For SaaS explainers and product videos, staging is especially important. Complex products often include multiple screens, features, and pieces of information, so the audience needs to know exactly where to look. By highlighting one feature at a time, keeping supporting elements in the background, and introducing information in a clear order, good staging helps the viewer follow the explanation without feeling overwhelmed.

At Motion The Agency, we do not try to force all 12 principles into every scene. Instead, we use them as a shared foundation for reviewing and improving our work. When a movement feels too stiff, a transition happens too quickly, or the viewer’s attention is being pulled in the wrong direction, the principles help us understand what needs adjusting. The tools and styles may have changed, but the goal is still the same: use movement to help people understand what is happening.

Where to see the principles in action (in our projects)

So, let’s look at how we actually use these principles in our own work. We will break down three projects that reflect a more modern animation style and highlight the principles that played the biggest role in each one.

These videos may include several of the 12 principles, but we will focus on the ones that are most noticeable and had the clearest impact on the final animation. Rather than treating the principles like a checklist, we use the ones that best support the idea, the product, and the audience

3D animated video (Skylar Advisor)

One thing we realised while working on this article was that we needed to look at both 2D and 3D animation. The principles can show up differently depending on the style, so it made sense to compare how they work across both.

To start, we chose one of our latest 3D animation projects and broke it down to see which principles are most visible, how they shape the movement, and why they help the final animation feel more believable and polished.

Skylar Advisor is a stylised 3D UI animation project built around abstract, less realistic elements. That made three principles especially important:

• Secondary action: The smaller movements needed to support the main action without distracting from it. Between 0:30 and 0:32, the UI elements move out of the way while the orbs create a subtle impact, making the transition feel smoother and more interactive. Another example appears at 0:41, where the small bounce after the click and the light-up effect help draw the viewer’s attention to the interaction. These details add energy to the scene while keeping the main action clear and easy to follow.
• Solid drawing: Every object in the video is easy to recognise, even though the setting itself is highly stylised and abstract. The shapes have clear boundaries, consistent depth, and a strong sense of structure, so the viewer can quickly understand where one object begins, where it ends, and what role it plays. This keeps the scene visually interesting without making the concept feel confusing.
• Appeal: Colour, movement, and the way each object interacts with the others all play a big role in making the video visually engaging. That was especially important for this project because, in an era of constant scrolling, the animation needs to catch attention quickly and give people a reason to keep watching. By combining a distinctive colour palette with smooth, playful movement, the video feels memorable without distracting from the message.

2D animated video (Primer)

Now that we have looked at how the principles show up in 3D animation, let’s move on to 2D animation.

While the principles were originally developed for hand-drawn work, most 2D animation today is created digitally. Even so, the same ideas still apply. The tools may be different, but animators still use timing, staging, anticipation, squash and stretch, and the other principles to make movement feel clear, natural, and engaging.

• Exaggeration: In this video, there are several moments where we intentionally push the movement to make a major change feel more dramatic. Between 0:38 and 0:42, the objects move quickly, merge into the logo, and are followed by a sudden shift in the screen colour. These larger movements make the transition feel more impactful and help the key information stand out clearly for the viewer.
• Squash and stretch: Between 0:06 and 0:08, the line acts as the main object and tries to push through a wall. To show the force behind that action, the wall bends and stretches slightly before cracking and allowing the line to continue. This small deformation makes the impact easier to read and gives the movement a stronger sense of resistance, pressure, and release.
• Slow in and slow out: This principle appears several times in the video, including around 0:03 and again near 0:42. The movements do not simply start and stop at full speed; they accelerate and slow down gradually, which helps the audience follow where the objects are moving and how each transition connects to the information on screen. This makes the animation feel smoother, clearer, and less mechanical.

Conclusion

So, what does all of this mean? The 12 principles of animation may have been created for hand-drawn cartoons, but they still show up everywhere in modern motion design. Whether we are working in 2D, 3D, UI animation, or SaaS product videos, they help us make movement feel clearer, smoother, and easier to follow.

That does not mean every scene needs all 12 principles. A 3D project might rely more on secondary action, solid drawing, and appeal, while a 2D animation may use exaggeration, squash and stretch, and slow in and slow out. The point is to use the right principle at the right moment, especially when something feels stiff, unclear, or simply not quite right.

At Motion The Agency, these principles give our team a shared foundation for keeping the quality consistent across every project. Curious how that could look for your product? Request a free video sample, and we will create a short animation concept for your brand.

FAQ