The 12 Principles of Animation, With Motion Graphics Examples

The 12 principles of animation are the rules that make movement look natural, readable and enjoyable to watch. Ollie Johnston and Frank Thomas, two of Disney's senior animators, set them out in their 1981 book "The Illusion of Life: Disney Animation". They were born in hand-drawn character animation, but they apply just as much to motion graphics, logo animation and interface motion today. Below, each principle is explained with a classic example and then with a practical motion graphics application. For the wider picture, start with the complete guide to animation and motion graphics.

Where the principles come from, and why they still matter

Disney's animators developed these ideas gradually from the 1930s onward, while searching for movement that audiences would believe and respond to emotionally. Johnston and Thomas later wrote them down, and they became a shared vocabulary that animators everywhere use to describe motion and diagnose its problems.

They have lasted because they describe perception, not software. When a viewer sees a circle drop onto the screen, they expect it to behave like a real object, even if it is a flat shape in an ad. When motion breaks that expectation by accident, it looks mechanical, cheap or confusing.

Two things to keep in mind before you start. The principles are not effects to pile onto every element; they are tools you pick from to serve the idea. And they make an excellent review checklist: when a movement feels "off" and you can't say why, run through the twelve one by one and you will usually find the cause.

The 12 principles, one by one

1. Squash and stretch

An object deforms under the forces acting on it: it squashes on impact and stretches when it moves fast, while keeping roughly the same volume. The classic example is a bouncing ball: round in the air, stretched along its path as it falls fast, flattened at the moment it hits the ground. The amount of deformation tells the viewer what the object is made of. A rubber ball squashes visibly; a bowling ball barely changes.

In motion graphics: a pressed button gets slightly shorter and wider; an icon landing in place squashes and then recovers. Keep the area roughly constant: if height drops to 80%, raise width to about 125%, because 0.8 × 1.25 = 1. Avoid deforming the logo or brand typography itself unless the brand guidelines allow it; apply the principle to the shapes around them instead.

2. Anticipation

A preparatory move that signals the main action: a character crouches before jumping or pulls an arm back before throwing. Anticipation tells the audience something is about to happen, so they don't miss it. The bigger the action, the clearer the preparation needs to be.

In motion graphics: before an element shoots left, it eases slightly right; before a card expands, it contracts a touch; before a logo reveal, a soft whoosh or a slight camera push sets it up. In interfaces, keep anticipation extremely short or drop it, because users expect an instant response to their tap. See motion design in websites and apps.

3. Staging

Presenting each idea so it can't be misread: shot choice, composition, lighting and a clear silhouette. One idea at a time. The classic test is whether a character's pose still reads when it is filled in solid black.

In motion graphics: decide the focal point of every moment. When the headline animates, everything else holds still or dims. Use size, contrast and empty space, and lead the eye to where the next element will appear. This extends the rules of visual hierarchy and composition. A practical test: pause on any frame. Can a viewer tell where to look within one second?

4. Straight ahead action and pose to pose

Two ways of working. With straight ahead, the animator draws frame after frame from start to finish. The result is spontaneous and fluid, great for fire, water, smoke and chaotic motion, but proportions and timing are hard to control. With pose to pose, the key poses come first and the in-betweens are added afterwards, giving control over timing and composition, which suits acting and planned movement. Professionals combine both.

In motion graphics: keyframe software is pose to pose by nature. You set the key states and the program generates everything in between (interpolation). The straight-ahead equivalents are frame-by-frame effects such as liquids, smoke and hand-drawn transitions, plus particle systems and simulations. A practical tip: set your key poses deliberately (start, end and extremes), then inspect the in-betweens rather than trusting automatic interpolation, which can produce paths or speeds you never intended.

5. Follow through and overlapping action

When the main body stops, loose parts such as hair, clothing or a tail keep moving and settle a moment later: that is follow through. Overlapping action means the parts of a body don't all move at the same time or speed. Without either, a character looks like a single rigid block.

In motion graphics: this shows up as staggering. Items in a group don't arrive on the same frame; each list item trails the previous one by two or three frames. A card stops and its content settles a beat later; an element overshoots its mark slightly and comes back. Watch the dosage: too much delay feels sluggish. The whole group should still read as one gesture.

6. Slow in and slow out

Objects need time to speed up and time to slow down. Classic animators placed more drawings near the start and end of a move and fewer in the middle, so the action accelerates and then settles.

In motion graphics: this is easing, the right replacement for linear, constant-speed motion. An element entering the screen arrives quickly and decelerates into place; an element leaving starts gently and accelerates away; an element moving between two on-screen positions eases at both ends. The labels "ease in" and "ease out" mean different things in different programs, so trust the speed graph rather than the names. The details are in timing, spacing and easing.

7. Arcs

Most natural movements follow curved paths: a swinging arm, a turning head, a thrown ball tracing an arc. Straight lines suggest something mechanical.

In motion graphics: curve the motion paths of organic elements, so a product dropping into a basket travels along a gentle arc rather than a ruler-straight line. Keep straight lines for mechanical, precise or grid-aligned interface elements. Check the visible motion path in your software or use onion skinning, because the path between two keyframes can bend or kink in ways you did not plan.

8. Secondary action

An extra movement that supports the main action and adds life: a character swinging their arms and whistling while walking, or changing expression while speaking. The rule is that it must never compete with the main action.

In motion graphics: a soft light sweep across a product as it slides in, a bar growing while a number counts up, background shapes drifting slowly, a small burst of particles when a button is pressed. The test: if viewers notice the secondary action before the primary one, tone it down.

9. Timing

The number of frames given to an action. It sets the speed and communicates weight, size, mood and personality. At 24 fps, an action lasting 12 frames takes half a second. Heavy objects are slow to start and stop; light ones are quick and lively. The same movement with two different timings can read as calm or as anxious.

In motion graphics: timing includes the hold, meaning how long an element stays still so it can be read. It also covers the rhythm of the whole piece: alternating fast and quiet moments, and syncing major changes to the music or the voice-over. Timing should follow brand personality, too: a luxury fragrance ad moves more slowly than a food delivery promo. For syncing to audio, see sound design for motion graphics.

10. Exaggeration

Pushing a pose, expression or movement a little beyond reality so its idea reads clearly and strongly. It is not random distortion but an amplification of the essence; realistic motion copied exactly often looks weak on screen.

In motion graphics: a bigger overshoot, stronger scale contrast, a sharper snap. Calibrate the dose to the brand:

• Children's brands, games and fast food can take bold, playful exaggeration.
• Retail and consumer tech usually suit a moderate amount.
• Banks, hospitals and government bodies need very light exaggeration, but not zero, or the motion feels lifeless.

11. Solid drawing

Drawing forms with a sense of volume, weight and balance in three-dimensional space, grounded in anatomy and perspective. The principle warns against "twins": both arms or both legs doing exactly the same symmetrical thing, which looks stiff.

In motion graphics: even flat design needs consistent spatial logic. Use one light direction and consistent shadows, a logical layer order (whatever passes in front of an element stays in front), steady perspective in isometric scenes, and parallax where near layers move faster than distant ones. Avoid mechanical symmetry too; offsetting two mirrored elements by a frame or two adds life.

12. Appeal

The quality that makes a character or design enjoyable and interesting to watch. Appeal is not just cuteness; a villain needs it too. It rests on simple, clear shapes, variety in proportions and design that reads easily.

In motion graphics: a coherent shape language, one consistent style, balanced color and polished details. No unintended jitter, no sudden pops, nothing drifting off alignment, and every movement ending cleanly. Appeal is the sum of the other principles plus design quality, and it is what keeps a viewer watching to the end.

Worked example: an "add to cart" icon in a short ad

An illustrative example at 30 fps, showing how the principles work together in a movement that lasts under a second:

1. Frames 0 to 4: the icon shrinks to about 90% of its size, getting ready to jump (anticipation).
2. Frames 4 to 16: it travels to its spot along a curved path (arcs), accelerating at the start and decelerating before arrival (slow in and slow out), and stretches slightly along its path at top speed (squash and stretch).
3. Frames 16 to 19: it squashes on landing, getting wider and shorter.
4. Frames 19 to 26: it rebounds, overshoots its normal size slightly and settles (follow through).
5. The label "Added to cart" appears about three frames after the icon (overlapping action), and a small counter pops on the basket badge (secondary action).
6. Everything else in the ad holds still throughout (staging), and the scene then holds long enough to read the label (timing).

Every principle here serves one idea: "the product was added". The level of exaggeration depends on the store's personality; a toy shop can take a bigger bounce than a luxury watch retailer.

Common mistakes when applying the principles

• Every principle at full strength on every element: the result is visual noise that buries the message.
• Treating them as presets: the principles are a way of thinking; a template doesn't know your element's weight or your brand's personality.
• Default linear motion: leaving the software's interpolation untouched is one of the clearest signs of unpolished work.
• Moving everything at once: staging collapses and the eye loses its way.
• Deforming the logo: squash and stretch on the brand mark may break the brand guidelines.
• Long anticipation in interfaces: users feel the app is slow.
• Follow through that never ends: repeated bouncing tires the eye and delays the message.

These principles matter most in text and logo work, where timing, staging and appeal all have to land within a few seconds. See kinetic typography and logo animation.

Practical checklist for reviewing any animation

• Does the viewer know where to look at every moment?
• Do movements start and end with appropriate easing instead of constant speed?
• Do organic elements travel in arcs and mechanical ones in straight lines?
• Do grouped elements arrive staggered without feeling sluggish?
• Does the timing express the element's weight and the brand's personality?
• Does text hold still long enough to be read?
• Are secondary actions quieter than the main one?
• Is the level of exaggeration right for the brand's tone?
• Are lighting, shadows and layer order consistent?
• Is the logo intact, with no deformation the guidelines don't allow?

Run every movement past these questions before delivery and you will catch most of the flaws viewers can feel but can't name.