Why Classical Animation Principles Still Matter
The 12 Principles of Animation were developed by Disney animators Ollie Johnston and Frank Thomas and published in their 1981 book The Illusion of Life. While originally designed for character animation, these principles are deeply applicable to motion graphics — they describe how objects behave in a way that feels natural and satisfying to the human eye.
Whether you're animating a logo reveal, a kinetic typography piece, or a data visualization, understanding these principles separates average motion work from truly compelling design in motion.
The 12 Principles — Motion Graphics Edition
1. Squash and Stretch
In motion graphics, this translates to scale distortion during movement. A button that slightly squashes on click and stretches as it bounces back feels alive. Even subtle use of this principle adds organic weight to otherwise rigid UI elements.
2. Anticipation
Before a major action, hint at it. A headline that pulls back slightly before flying into frame uses anticipation. This principle is critical in transitions — it prepares the viewer's eye for what's about to happen.
3. Staging
Every animation should clearly communicate one idea at a time. Avoid animating too many elements simultaneously. Hierarchy and timing ensure the viewer knows where to look.
4. Straight Ahead vs. Pose to Pose
In motion graphics, this maps to working with keyframes (pose to pose) versus using expressions or procedural animation (straight ahead). Most MoGraph work is keyframe-driven, but mixing both approaches adds variation.
5. Follow Through and Overlapping Action
When an element stops, not all parts stop at the same time. A text block that decelerates while individual letters continue to stagger creates this effect beautifully. Use offset keyframes and easing variations to achieve this.
6. Slow In and Slow Out (Easing)
Perhaps the single most important principle for motion designers. Almost nothing in the real world moves at a constant speed. Always apply easing to your keyframes — ease in for deceleration, ease out for acceleration.
7. Arcs
Natural movement follows curved paths. When animating position, use curved motion paths rather than linear ones. After Effects' spatial interpolation handles this automatically if you use Bezier handles correctly.
8. Secondary Action
A subtitle that fades in slightly after the main heading appears is a secondary action. These supporting animations reinforce the primary motion without competing with it.
9. Timing
The number of frames between keyframes determines the feeling of speed and weight. Fewer frames = snappier and lighter. More frames = heavier and more deliberate. Timing is your most powerful expressive tool.
10. Exaggeration
Motion that feels realistic on screen is often more extreme than real life. Push your easing, overshoot your scale, and amplify your anticipation. Subtle exaggeration makes motion feel dynamic without looking wrong.
11. Solid Drawing (Solid Design)
In motion graphics, this means designing with three-dimensional thinking — even in 2D work. Understanding weight, perspective, and form makes flat design feel more grounded.
12. Appeal
The hardest to define but easiest to feel: your animation should be enjoyable to watch. Clarity, rhythm, and purpose all contribute to appeal. A well-timed, well-spaced animation with confident easing will always feel more appealing than a technically complex one that lacks personality.
Putting It Into Practice
Start small. Pick one principle per project and focus on applying it deliberately. Over time, combining these principles becomes instinctive, and your motion work will develop a recognizable sense of life and craft that sets it apart.