The 12 Principles of Animation Applied to Motion Design

In 1981, Disney animators Ollie Johnston and Frank Thomas published "The Illusion of Life," outlining 12 principles that form the foundation of great animation. Nearly 45 years later, these principles are just as relevant for motion designers working with UI animations, brand films, and abstract motion graphics.

1. Squash & Stretch

The most fundamental principle. It gives a sense of weight and flexibility. In motion design, think about how a button press can "squash" slightly on impact, or how a logo can "stretch" as it enters the screen. Subtle application goes a long way.

2. Anticipation

Before a major action, there's a small preparatory movement. A menu sliding out might pull back slightly first. A bouncing ball dips before launching. This telegraphs what's about to happen and makes motion feel natural.

3. Staging

Direct the viewer's attention. Every frame should have a clear focal point. In motion design, this means being intentional about what moves, when it moves, and what stays still. Don't animate everything at once.

4. Straight Ahead vs. Pose to Pose

Two approaches to animating. Straight ahead is sequential and spontaneous — great for organic, fluid motion. Pose to pose is planned — you set key poses first, then fill in between. Most motion designers use pose to pose (keyframing), but knowing when to go straight ahead adds life to your work.

5. Follow Through & Overlapping Action

Not everything stops at the same time. When a card slides into place, its shadow might lag slightly behind. When text settles, individual letters might have micro-delays. This creates a sense of physics and believability.

6. Slow In & Slow Out (Easing)

Linear motion looks robotic. Real objects accelerate and decelerate. In motion design, proper easing curves are the difference between amateur and professional work. Master your graph editor — it's where the magic happens.

7. Arcs

Natural movement follows curved paths. Even in abstract motion design, elements that move in arcs feel more organic than those moving in straight lines. Apply this to transitions, reveals, and any element that moves across the screen.

8. Secondary Action

Supporting actions that complement the main movement. When a notification slides in, a subtle glow or particle effect is a secondary action. It enriches the motion without competing for attention.

9. Timing

The number of frames (or milliseconds) an action takes defines its character. Fast movements feel snappy and energetic. Slow movements feel elegant and weighty. Timing is everything in motion design — get it wrong and nothing feels right.

10. Exaggeration

Push beyond reality to make motion more dynamic. A bounce that overshoots, a scale that goes slightly too large before settling. In UI motion, exaggeration should be subtle. In brand films and character work, you can go bolder.

11. Solid Drawing (Solid Design)

For motion designers, this translates to strong visual fundamentals — composition, color, typography, and form. Your animation can only be as good as the design it's built on.

12. Appeal

The hardest to define but the easiest to recognize. Does the motion feel good to watch? Is there a personality to it? Appeal comes from the sum of all other principles, executed with care and intention.

Putting It All Together

You don't need to consciously apply all 12 principles to every project. But understanding them gives you a vocabulary for why some motion feels great and other motion falls flat. Study these principles, practice them in isolation, and they'll gradually become second nature.