The 12 Principles of Animation Explained
The 12 animation principles are the foundational rules that make movement feel believable, and they apply just as much to a bouncing button in an app as to a hand-drawn cartoon. Codified by Disney animators Ollie Johnston and Frank Thomas in their book The Illusion of Life, these principles are the difference between motion that feels alive and motion that feels mechanical. This guide explains all twelve in plain terms, with practical notes for motion graphics and UI work.
These principles are the theory beneath every good piece of motion design. For the wider context of where they fit, see our motion graphics guide, the pillar that maps the whole discipline. Here we go deep on the fundamentals that make any animation read well.
1. Squash and Stretch
Squash and stretch gives objects a sense of weight and flexibility by deforming them in motion. A bouncing ball flattens on impact and stretches as it falls. The critical rule: volume stays constant, as something stretches thin, it must also narrow, or it looks like it is growing. In motion graphics, even rigid elements benefit from a subtle stretch on fast moves and a small squash on landing; it adds life to otherwise stiff shapes.
2. Anticipation
Anticipation is the small preparatory move before a main action, a wind-up before a punch, a crouch before a jump. It signals to the viewer that something is about to happen and makes the main action read more clearly. In UI, a button that dips slightly inward before springing out feels intentional. Skipping anticipation makes motion feel abrupt and surprising in a bad way.
3. Staging
Staging is directing the viewer’s attention to what matters. Through composition, contrast, and timing, you ensure the audience looks where you want at the right moment. In motion graphics this means not animating everything at once, isolate the key element, let it move, then bring in the supporting pieces. Clear staging is the difference between a focused message and visual chaos.
4. Straight Ahead and Pose to Pose
These are two approaches to creating animation. Straight ahead means animating frame by frame from start to finish, producing fluid, spontaneous motion (good for fire, water, energy). Pose to pose means defining the key poses first, then filling the gaps, giving you tighter control over timing and composition. Most motion graphics, being keyframe-based, is inherently pose to pose: you set the important states and the software interpolates between them.
5. Follow Through and Overlapping Action
Follow through is the way parts of an object keep moving after the main body stops, a character halts but their hair and clothing settle a beat later. Overlapping action means different parts move at different rates rather than in lockstep. Together they kill the robotic look of everything starting and stopping simultaneously. In motion design, staggering when elements arrive and letting trailing parts settle slightly late is one of the most powerful polish techniques available.
6. Slow In and Slow Out (Easing)
Slow in and slow out, known in motion software as easing, is arguably the single most important principle for motion graphics. Real objects accelerate from rest and decelerate before stopping; they never move at constant speed and snap to a halt. Adding ease so elements speed up and slow down is the fastest way to make beginner animation look professional. Linear motion is the number one giveaway of inexperienced work.
7. Arcs
Most natural movement follows arcs, curved paths, rather than straight lines. A swinging arm, a thrown ball, a turning head all trace curves. Motion that travels in dead-straight lines feels mechanical and lifeless. In motion graphics, letting elements travel along a gentle arc instead of a ruler-straight path instantly makes movement feel more organic, even for abstract shapes.
8. Secondary Action
Secondary action is supporting movement that enriches the main action without distracting from it, a character whistling while walking, or a subtle background shift that reinforces a transition. The key is hierarchy: the secondary action must support, never compete with, the primary one. Used well, it adds richness; overused, it creates clutter that pulls focus from your message.
9. Timing
Timing is how many frames an action takes, and it communicates weight, mood, and meaning. A heavy object moves slowly with more frames; a light one moves quickly with fewer. The same animation at 8 frames feels snappy and energetic, at 30 frames it feels slow and deliberate. Mastering timing, knowing how long a move should take to feel right, is what separates intuitive motion designers from those who guess. It is closely tied to spacing: how far an element travels per frame.
10. Exaggeration
Exaggeration pushes actions beyond strict realism to make them read more clearly and feel more dynamic. A perfectly accurate copy of reality often looks dull on screen. A slightly bigger anticipation, a snappier ease, a touch more squash, these heightened choices communicate energy. The art is calibration: enough to feel alive, not so much that it becomes cartoonish (unless that is the goal). In UI motion, restrained exaggeration reads as responsive and lively.
11. Solid Drawing (Solid Design)
Originally solid drawing, the understanding of form, weight, volume, and three-dimensional space in hand-drawn work. For motion graphics, read this as solid design: your elements must respect consistent perspective, weight, and visual logic. If a shape rotates, it should behave like a real object with mass. Animation cannot rescue elements that ignore spatial consistency; the underlying design has to be sound first.
12. Appeal
Appeal is the charisma of your animation, the quality that makes it pleasing and engaging to watch. It is not about being cute; it is about clarity, good design, and confident motion working together so the viewer enjoys the experience. Appeal is the sum of the other eleven principles applied well, plus strong fundamentals in composition, color, and type. Work with appeal feels considered and intentional; work without it feels generic, even when technically correct.
Applying the Principles to Modern Motion Work
You will not consciously apply all twelve to every project, but the heavy hitters for motion graphics and UI are easing, timing, follow through/overlap, and anticipation. Internalize those four and your work will immediately look more professional. The rest, arcs, exaggeration, secondary action, refine motion from good to excellent.
The best way to learn them is by doing. Animate short loops, a bouncing ball remains the classic first exercise precisely because it teaches squash and stretch, easing, timing, and arcs all at once. Our guide on how to make a GIF covers exporting these practice loops so you can share and critique them. As you move into software, our After Effects for beginners guide shows where these principles live in the timeline and graph editor.
Frequently Asked Questions
What are the 12 principles of animation?
They are squash and stretch, anticipation, staging, straight ahead and pose to pose, follow through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal. Disney animators codified them in The Illusion of Life as the foundations of believable movement.
Do the animation principles apply to motion graphics?
Absolutely. Although the principles were created for character animation, they apply directly to motion graphics and UI animation. Easing (slow in and slow out), timing, follow through, and anticipation are especially critical, they are what make animated type, logos, and interface elements feel polished rather than mechanical.
Which animation principle is most important for beginners?
Slow in and slow out, easing, has the biggest immediate impact. Real objects accelerate and decelerate rather than moving at constant speed. Adding easing to your keyframes instantly transforms stiff, robotic animation into something that feels natural, making it the highest-value principle for any beginner to learn first.
Who created the 12 principles of animation?
They were developed by animators at Disney during the 1930s and later codified by Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. The principles distilled decades of studio practice into a teachable framework that remains the foundation of animation today.
