The 12 Principles of Animation Applied to Motion Design

The 12 principles were developed by Disney animators Frank Thomas and Ollie Johnston. While they were written for character animation, they apply directly to motion design. Here's each one with a motion graphics context:

1. Squash and Stretch
Objects deform during movement to show weight and flexibility. In motion design: buttons that squish on click, bouncing logos, elastic transitions. The most important principle.

2. Anticipation
A preparatory movement before the main action. Pull back before launching forward. In MoGraph: a button scales down slightly before popping up, a sidebar slides left briefly before sliding right to open.

3. Staging
Present ideas so they're unmistakably clear. In MoGraph: guide the eye using contrast, motion, and hierarchy. Only one thing should be demanding attention at a time.

4. Straight Ahead Action vs Pose to Pose
Two animation methods: animating frame-by-frame (straight ahead) vs. setting key poses and filling in between (pose to pose). Motion designers primarily use pose to pose — set keyframes at key moments, let the software interpolate.

5. Follow Through and Overlapping Action
Different parts of an object don't stop at the same time. In MoGraph: when a card slides in, the text arrives slightly after. Elements have different inertia — heavier things take longer to settle.

6. Slow In and Slow Out (Easing)
More frames at the beginning and end of an action. THIS is easing in After Effects. Easy Ease, Graph Editor curves — this principle is why we never leave keyframes linear.

7. Arc
Natural movement follows curved paths, not straight lines. In MoGraph: objects traveling between points should arc. Set position keyframes and add bezier curves to the motion path.

8. Secondary Action
Additional animations that support the main action. The main text animates in (primary), while background particles drift gently (secondary). Secondary actions add richness without distracting.

9. Timing
The number of frames between key poses creates the feeling of speed, weight, and mood. Fast timing = light, energetic. Slow timing = heavy, dramatic. In MoGraph: the difference between 10 frames and 30 frames for the same movement completely changes the feel.

10. Exaggeration
Push beyond reality for impact. In MoGraph: overshoot on scale (go to 110% before settling to 100%), extreme easing curves, dramatic speed contrasts.

11. Solid Drawing (Solid Design)
Understand form, weight, and volume. In MoGraph: maintain consistent visual weight, proper use of light/shadow, and designs that read clearly at any point in the animation.

12. Appeal
Design that's pleasing and engaging. In MoGraph: clean typography, harmonious colors, satisfying motion. The overall polish that makes people WANT to watch.

The 3 most critical for motion design:
1. Slow In/Slow Out (Easing) — fundamental to everything
2. Anticipation — makes motion feel intentional
3. Follow Through — makes motion feel natural

Pro tip: You don't need to consciously apply all 12 to every project. Master easing first — it accounts for 60% of what makes animation feel "professional." Then add anticipation and follow-through. Those three principles alone will elevate your work dramatically.