Our WorkWhy Us

Momentum: Virtual Summit | On-demand replays

An impressive collection of 4+ hours of content with 11 sessions on scaling growth during a downturn, featuring 15+ expert speakers from Jasper, Chili Piper, Instacart, Zapier, LEGO, HubSpot, Clio, Amazon, Adobe, and more.
View event
Gather & Grow

Gather & Grow - Jan 25th - Zero-Click B2B Content

Replay this interactive session, where we explore how to use zero-click content and better measure it with expert Amanda Natividad!
View event
Gather & Grow

B2B Goes UGC | On-Demand Recording

Tune in to our full-length session on leveraging user-generated content, with our friend, Elif Hiz.
View event
Events & Summits

Explore all the content inside Events & Summits!

See all
BlogPricingBook a DemoSign In

12 Principles of Animation & How Best To Use Them

Piotr Smietana
Piotr Smietana8 min read
Motion Design and the 12 Principles of Animation - Superside

Motion design — which uses animation, graphic design and sound together — gives you a richer way to communicate with your clients. It allows you to take flat images and bring them to life, adding depth to your story and entertaining viewers.

Animators in the entertainment field who create cartoons and comics can teach us a lot about motion design in the business context. In this post, we’ll discuss a few of the basic principles you can follow to make your animation shine.

What you'll learn

The Types of Motion Design and Why They Matter

The 12 Principles of Motion Design and Animation

Create Your Own Animations

The Types of Motion Design and Why They Matter

Motion design is used in all kinds of contexts besides entertainment, such as advertising, illustration, and data visualization. It can be combined with other types of media, including still images and icons or video footage to create an interesting effect.

There are four main types of animations used in the motion design field:

  1. Animation overlay adds data visualization, icons, illustrations, or text to a video to convey information
  2. Explainer graphics can educate viewers about products, processes, or concepts
  3. Emotive graphics inspire a particular emotional response
  4. Promotional graphics raise awareness about a service, product, or initiative

Whether they’re used for education, advertising or entertainment, animated graphics can capture people’s interest in a way that unanimated ones can’t. If you’re looking to increase audience engagement with more likes, shares, and comments, try using motion design: Twitter reports that tweets with GIFs get 55% more engagement than those without. You can also use motion design to tell a story using your brand’s unique voice, like Superside did for Imperfect Foods.

Animated content can also get your content in front of more eyes: it’s favored by many social media algorithms. In people’s inboxes, Campaign Monitor found that emails with videos have a  65% higher click-through rate than those without. According to a study by Vistacreate, motion ads get 1.5x more clicks on average than static ads.

A Brief History of Animation (and How We Got Here Today)

Originally, animation wasn’t used for advertising or education — it was just for entertainment. The first fully animated film, called Phantasmagorie, was made by Émile Cohl in 1908. At the time, even simple animations were (understandably) a bit shocking to viewers — imagine if you’d never seen an image move and then suddenly did! It would feel a bit like Harry Potter seeing photographs move for the first time.

Animated films really started to take off when Disney started to produce their own. They captured the hearts of viewers all around the world with their first fully animated feature film, Snow White and the Seven Dwarfs, in 1937. The animators at Disney quickly went on to become the experts in the field, because they found a way to make their animations mimic real-world physics, emotions, and characters — even when the character wasn’t human (think of the glimmer in Bambi’s eyes to suggest emotion, for example).

In 1981, two of Disney’s best animators, Frank Thomas and Ollie Johnston, wrote what many consider to be the bible of animation, The Illusion of Life. It gives animators and motion designers some practical principles, like anticipation and exaggeration, that apply across all kinds of animation. Though they were originally intended to help animators make better traditional cartoons, most of the same principles apply to animating marketing content today.

Illustration of one human helping another human climb that hill.

Animation Can Elevate Your Ads – and So Can Expert Insight

If you’re looking for ways to level up your creative, look no further than our “How to Build High Impact Design Teams” guide.

Get the Guide!

The 12 Principles of Animation

Here are the 12 principles of animation and how you can use them in your motion design to produce a compelling storyline and get your message across.

1. Squash and Stretch

Imagine you’re animating an image of a ball bouncing on the floor. In order to make it look realistic, you wouldn’t keep the ball round the whole time — you’d show it squashing when it hits the floor and expanding again as it rebounds. The object becomes “organic” and in motion design, it also emphasizes the path of the motion. This is squash and stretch. It conveys weight, flexibility, motion, and even speed.

2. Anticipation

Picture the Road Runner in the moments before he starts running — his legs wind up and the viewer can see by the quick, rotating movements of his legs that he’s about to take off. Anticipation makes animation look realistic. Without it, movement would look too sudden or jarring and come off as fake. Anticipation can be exaggerated for comic effect (like the Road Runner) or simply used to make human movement look realistic (like showing someone bend their knees before they jump).

3. Staging

This design principle is borrowed from the theater: staging the layout of the stage and the placement of characters for effect and storytelling. Objects closer to the viewer gain more significance, while objects further away fade into the background and are therefore seemingly less important to the story. You can use staging to draw the viewer’s eye to a certain area of the graphic or to signal what’s important within the scene.

4. Straight Ahead vs. Pose-to-Pose

As animation evolved, animators found different methods to make their illustrations look more convincing. The straight-ahead technique involves drawing an action frame by frame from start to finish (like in a flipbook) and it’s good for animations which have unpredictable, fluid, and realistic movements. In the pose-to-pose technique, you draw the starting and ending point of an action and then fill in the rest later with the help of a computer.

5. Follow Through and Overlapping

These refer to two different, but related, principles for capturing realism in a graphic. Follow-through makes an action look more fluid by using the concept that when a body in motion stops movement, some parts continue to follow through (picture a character running to a cliff and teetering over the edge — they might just stop dead in their tracks, but their moving coat or the kicked-up dust around their feet won’t).

Overlapping action, on the other hand, keeps movement from looking too robotic by having different parts of an object move at different rates. Instead of all the parts of a character’s body moving in perfect sync, use overlapping action to swing their left arm differently than their right arm, bob their head, and add other realistic details at the same time.

6. Slow in and Slow Out

Similar to follow through, slow in and out make movement seem more fluid. It illustrates the tendency of things to come to rest, or to start moving, in a progressive way. A car can’t immediately go 60 miles per hour and then back to 0 — it accelerates, gaining speed up and then slows down again when it stops. In animation, this illusion of speed is attained by adding more frames at the beginning and end of an action.

7. Arc

Even though an animation happens on a flat screen, it still has to follow the laws of natural movement to look real. If you throw a ball in the real world, it’ll arc upwards and then begin to fall, rather than flying straight forwards. The same arc trajectory should be applied in an animation if you want a realistic end result.

8. Secondary Action

To make an animation feel lifelike, you have to add lots of details. A character can blink and look around while walking down the road, their chest should move when they breathe, and they may tap their foot when they sit. These secondary actions go a long way to make an animation realistic.

9. Timing

Consider the pacing of a clip if you want it to look more realistic. Speeding up or slowing down the animation (by adding or removing frames) is a way to communicate things like weight, agility, or even personality in the case of facial expressions. Timing can be everything.

10. Exaggeration

Have you ever noticed how most animated figures aren’t anatomically correct, but still look human? This is because animators use exaggeration to convey personality and action. This is a great way to give your animated graphics a signature style — consider using unexpected colors, proportions, or patterns to make your animations stand out or give them more emotion. For example, take a look at this GIF from the classic cartoon Tom and Jerry: because the cat’s eyes are exaggerated in size, we know that he’s begging for something.

11. Solid Drawing

Drawing its name from solid geometry, solid drawing means accounting for three dimensional space. Just like in other “flat” art forms, like sketching or painting, it can be easy to forget about all three dimensions. To achieve a realistic result, animators and other 2D artists use shadows, perspective and shading to show depth and volume. Don’t cross into uncanny valley though — characters that are too symmetrical or close to life (remember the eery 2004 Polar Express movie?) can look creepy. In particular, “The Illusion of Life” warns against creating characters whose left and right sides are identical. Such oversights can dispel the immersion.

12. Appeal

Unlike live video where there are practical limitations, animation gives you complete freedom over your imagery to make it attractive enough to be worth watching. You get to create an entire world however you want it to look, and can give characters a wide array of physical features like wide Anime eyes. Create characters and scenes that make sense for your content — for example, the animations in Archer are comic book-inspired noir, while the animations in Adventure Time are whimsical and bright. At the end of the day, you want to create a world that draws in your viewers and by doing so achieves your goals, whether that’s selling a product, teaching a lesson, or telling a joke.

Create Your Own Animations

From cartoons to advertisements, people – including your customers – are delighted by the charm and power of animation. Are you ready to put the 12 principles of motion design to work in your advertisements? See how Superside can help with your next motion design project.

Space explorer making a discovery. Hope this lifeform is friendly...

Scale With a Design Partner Who’s a True Extension of Your Team

With a full range of graphic design, motion, illustration, social media video and branding capabilities, Superside helps you increase your capacity and pipeline—without reinventing any wheels.

Book a Call
Published: Aug 24, 2022
Piotr Smietana
Written by
Piotr Smietana
Piotr is a Marketing Creative Director at Superside, based in Cracow, Poland. He's a video marketing expert with over 9 years of experience in digital marketing, advertising, gaming and the film industry. When not at work, you can find him flying his drone on an epic adventure, jamming on the electric guitar, or hitting up a nearby music festival.

Join our community of 15,000 strong and receive the best design and marketing content, biweekly

No charge. Unsubscribe anytime

Continue reading

Hassle-free design starts here

Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top-quality designs at lightning-fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.

In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you

Get ready to join 450+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.
Ready to get started?Book a demo now

Book a call with us

We need your phone number for the demo. We'll never use it for any other purposes.
Superside is a revolutionary way for businesses to get good design done at scale.Trusted by 450+ ambitious companies, Superside makes design hassle-free for marketing and creative teams. By combining the top 1% of creative talent from around the world with purpose-built technology and the rigor of design ops, Superside helps ambitious brands grow faster. Since inception, Superside has been a fully remote company, with more than 700 team members working across 57 countries and 13 timezones.
© 2023 Superside. All rights reserved.