Creative Animation Design

What can designers learn from Disney’s 12 principles of animation?

By Lucy Selley, Junior digital designer

connective3

|

The Drum Network article

This content is produced by The Drum Network, a paid-for membership club for CEOs and their agencies who want to share their expertise and grow their business.

Find out more

November 28, 2023 | 7 min read

Disney’s 12 principles of animation might be some of the most influential tenets in the history of design. Here, Connective3’s Lucy Selley boils them down to 4 lessons for modern designers.

A statue of Walt Disney and Mickey Mouse, in front of a Disney pleasure resort

Are Disney's foundational principles of animation still useful to designers today? / Credit: Disney / Travis Gergen via Unsplash

Disney’s 12 principles of animation were first introduced by Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. The principles drew inspiration from Disney animators from the 1930s onwards as they aspired to create animation that was engaging and captured realism.

These principles have been the fundamentals in the evolution of animation, influencing the way animators bring characters and scenes to life. Animation has certainly evolved in the decades since the book was first published, but the fundamentals remain and can be applied to all areas of animation today, from movies to web design.

I use them as a designer in animation every day.

1. Anticipation

Anticipation helps prepare a viewer for what’s about to happen. It is a smaller motion that proceeds to a bigger motion to make an animation look natural, making a scene more engaging. Think of the action a person takes before they perform a task, such as a golfer swinging their arms back before hitting the ball.

Anticipation can also direct an audience’s attention: by moving one element, you can draw viewers’ eyes right where you want them to go. This is also known as ‘eye tracing’ and can be used to give you control of your audience’s focus.

via GIPHY

2. Follow-through and overlapping action

Follow-through is opposite to anticipation. It happens at the end of a motion. After the main motion, it overshoots the final position and bounces back to its resting position, adding fluidity and realism. Specifically, if a character is in motion, you’ll notice that their arms and legs may have different timings to their head.

Suggested newsletters for you

Daily Briefing

Daily

Catch up on the most important stories of the day, curated by our editorial team.

Ads of the Week

Wednesday

See the best ads of the last week - all in one place.

The Drum Insider

Once a month

Learn how to pitch to our editors and get published on The Drum.

Overlapping is when something moves first and then something else follows like a secondary motion. An example of this is if a character is running then stops, their hair may continue to sway for a few frames before settling down. These principles are important if you want your animation to flow realistically.

via GIPHY

3. Squash and Stretch

This principle makes an object feel flexible and gives the illusion of gravity. By showing an object reacting to its surroundings, you’re giving your animation a sense of realism which is why, when using squash and stretch, you need to consider the material of the object. An example of this is a rubber ball would warp more than a bowling ball would when hitting the ground. You also need to be aware of the volume of the object and keep it consistent, so the object is still recognizable after it’s been animated. So, when you stretch something, it should get thinner, and when you squash something, it should get wider.

via GIPHY

4. Slow in / slow out

In the real world, objects must accelerate to start moving or decelerate to slow down before stopping. The slow in/slow out principle makes a motion look more realistic by easing into the starting position and easing out of the ending position rather than just moving suddenly and looking robotic. An example of this is the motion of a car. When a car starts moving, it doesn’t instantly reach full speed and must accelerate to gain velocity. Likewise, when it’s coming to a halts the car doesn’t stop instantly and must gradually decelerate until it reaches a complete stop.

via GIPHY

Disney’s 12 principles of Animation have not only shaped the world of animation but have also influenced many other forms of storytelling. These principles, developed by some of the best animators in history, continue to be a source of inspiration and guidance for animators, filmmakers, and artists around the world.

Over the last few months, our design team have been immersed in a motion design course that delves deep into these animation principles, which have not only enhanced our motion skills, but enabled us to craft even more dynamic, eye-catching, and realistic animation. Incorporating these principles into your everyday motion design practice can significantly elevate the quality and impact of your creations, infusing life, depth, and emotion.

Creative Animation Design

Content by The Drum Network member:

connective3

We create market leaders. We do this through the application of digital marketing strategy, adopting SEO, Content Strategy, Digital PR, PPC, Display, Social Media...

Find out more

More from Creative

View all

Trending

Industry insights

View all
Add your own content +