The 12 Principles of Animation, Explained Simply

The 12 principles of animation are a checklist for making movement believable. They come from Disney's studio in the 1930s and were written down by two of its senior animators, Ollie Johnston and Frank Thomas, in their 1981 book The Illusion of Life. Nearly a century later, they still turn up in animation school syllabuses, game studios and even design guidelines for phone interfaces.

You don't need to master all twelve before you start. They're easier to understand when you try each one with a simple shape, which is why every section below ends with a small exercise. You can do most of them in the keyframe playground on the home page or on paper with a pencil.

1. Squash and stretch

Objects that move tend to change shape. A rubber ball flattens when it hits the floor and stretches as it falls fast. The rule of thumb is that the volume stays the same: if the ball gets wider, it also gets shorter. Exaggerate it for cartoony motion and keep it subtle for realistic objects, but don't leave it out entirely, or the object will look rigid and weightless.

Try it: animate a ball dropping onto a floor. On the frame of contact, scale it wider and shorter. On the frames just before contact, stretch it slightly along the direction of travel.

2. Anticipation

Before a big action, there's a small opposite action that prepares it. A character crouches before jumping, pulls an arm back before throwing, and leans away before running off screen. Anticipation tells the audience something is about to happen, so they look in the right place.

Try it: move a square across the stage, but first move it a little in the opposite direction. Compare the two versions.

3. Staging

Staging means presenting one idea at a time, clearly. Pick the camera angle, pose and composition that make the action easiest to read. Silhouette is a good test: if you fill a pose in solid black and can still tell what's happening, the staging works. Clutter, overlapping actions and busy backgrounds all fight staging.

Try it: draw a character pointing at something, then fill the drawing in black. If the pointing arm disappears against the body, redraw the pose.

4. Straight ahead action and pose to pose

These are two ways of working. With straight ahead, you draw frame 1, then frame 2, then frame 3, discovering the motion as you go. It's spontaneous and good for fire, water and chaotic action. With pose to pose, you draw the important poses first, the keyframes, then fill in the frames between them. It gives you more control over timing and is how most digital animation works. Most animators mix the two.

Try it: animate a flickering flame straight ahead, then a ball moving between three fixed points pose to pose. The keyframes guide covers the second method in detail.

5. Follow through and overlapping action

Not everything stops at once. When a character stops running, the hair, clothes and loose parts keep moving and settle a moment later. That's follow through. Overlapping action means different parts of a body move on slightly different timing: an arm swing starts at the shoulder, then the elbow, then the hand. Without these, motion looks stiff and mechanical.

Try it: animate a square that slides and stops, with a small "tail" shape attached that keeps going for a few frames and swings back.

6. Slow in and slow out

Most things accelerate and decelerate. A car doesn't jump from zero to full speed. In animation, that means more frames near the start and end of a move and fewer in the middle. In software, this is easing: ease-in, ease-out and ease-in-out. It's the single biggest difference between amateur and polished motion.

Try it: in the playground, move the ball between two keyframes with Linear, then with Ease-in-out, with onion skin on. Notice how the ghost images bunch up at the ends. The easing guide goes further.

7. Arc

Living things and thrown objects move along curved paths, not straight lines. A head turning dips slightly in the middle. A swinging arm traces an arc from the shoulder. Straight-line motion reads as mechanical, which is fine for a robot or a sliding door but odd for anything alive.

Try it: use three keyframes to move a ball from left to right with the middle keyframe higher, so the path curves. Turn on the path display to check the arc.

8. Secondary action

A secondary action supports the main one without stealing attention from it. A character walking while whistling, or tapping a pencil while thinking. It adds personality, but if it competes with the main action, it hurts staging.

Try it: animate a ball rolling across the stage and add a slow rotation as the secondary action.

9. Timing

Timing is the number of frames an action takes. More frames make an action slow and heavy, fewer make it fast and light. Timing also conveys mood and weight: a bowling ball and a balloon falling the same distance need different timing. The frame rates and timing guide explains how to count frames.

Try it: animate the same drop at 0.4 seconds and at 1.2 seconds. Ask yourself which looks heavier.

10. Exaggeration

Animation that copies reality exactly often looks flat. Exaggeration pushes poses, expressions and timing further than life so they read clearly on screen. The trick is to keep it consistent with the style: a cartoon can stretch a character's jaw to the floor, a realistic piece might only widen the eyes a bit more than life.

Try it: take your bouncing ball and double the squash and stretch. Then find the amount that feels right for the style you want.

11. Solid drawing

Solid drawing means drawing forms as if they have weight, volume and depth, in three dimensions, even on a flat page. It covers perspective, anatomy and avoiding "twins," where both arms or legs mirror each other exactly. For digital 2D work with rigged characters, the same idea applies to how you design the pieces.

Try it: draw a simple box character turning from the front to three-quarter view, keeping its volume constant.

12. Appeal

Appeal is what makes a character or design pleasing to watch. It doesn't mean cute; a villain can have appeal. Clear shapes, readable silhouettes, varied proportions and a little asymmetry help. A design with appeal makes viewers want to keep looking.

Try it: sketch the same character three times with different head-to-body proportions and pick the one with the most personality.

How to practice them

Pick one principle a week and do a short exercise, ideally under three seconds of animation. The bouncing ball alone covers squash and stretch, timing, slow in and slow out, and arcs. Once those feel natural, add a tail to the ball for follow through, then move on to a simple character.

Questions

Where do the 12 principles of animation come from?

Disney animators Ollie Johnston and Frank Thomas described them in their 1981 book The Illusion of Life: Disney Animation. They summarized techniques the studio's artists had developed since the 1930s.

Do the 12 principles apply to motion graphics and UI animation?

Most of them do. Timing, easing (slow in and slow out), anticipation, follow-through and arcs all make interface motion feel more natural. Solid drawing and appeal apply more to character work, though appeal matters for any design.

Which principle should a beginner learn first?

Timing and slow in and slow out. Almost every early exercise, such as a bouncing ball or a pendulum, is about getting the number of frames and the spacing between them right.