Indexwriting
Writing indexNote / Nov 11, 2021

Field note / motion design / motion graphics / animation

What Motion Design Owes to Traditional Animation Principles

The twelve principles of animation aren't old rules to be replaced by software — they're the foundation that makes motion design feel alive.

Published
Nov 11, 2021
Length
2 min read / 488 words
Topics
motion design, motion graphics, animation

Why Old Principles Still Apply

Disney animators articulated the twelve principles of animation in the 1930s and codified them in book form decades later. They were describing hand-drawn character animation, not After Effects. And yet these principles govern the quality of motion design work today just as much as they governed classic animation.

The reason is simple: the principles are about how movement communicates, not about the technology used to create it. And that hasn't changed.

Squash and Stretch in UI and Logo Animation

Squash and stretch — the distortion of an object to suggest physical mass and flexibility — shows up constantly in high-quality motion design. A logo element that slightly squashes on impact and stretches on launch feels alive. The same movement without squash and stretch feels mechanical.

This doesn't have to be extreme. Subtle squash and stretch reads at a subconscious level. It's the difference between motion that feels considered and motion that feels like someone just keyframed position.

Anticipation Prepares the Eye

Before a major movement, good animation includes anticipation: a small movement in the opposite direction that prepares the viewer for what's coming. This principle translates directly into motion graphics.

A logo element that snaps into frame without anticipation feels sudden and harsh. The same element preceded by a small opposing movement before it launches feels dynamic and intentional.

Ease In and Ease Out

This might be the most abused principle in motion graphics. Beginners often animate with linear timing — constant velocity from point A to point B. This looks robotic because nothing in physical reality moves that way. Objects accelerate and decelerate.

Ease in and ease out (acceleration at the start, deceleration at the end) is the baseline. Beyond that, the specific easing curve — how quickly the acceleration happens, how the velocity peaks — communicates the personality of the motion. Heavy objects ease differently from light ones. Energetic motion eases differently from deliberate motion.

I spend a lot of time in the graph editor because of this. Default easing presets get you part of the way. Custom curves get you the rest.

Timing is Meaning

Timing is the most overlooked design element in motion work. The same movement at different speeds communicates completely different things. A fast snap reads as energetic, aggressive, decisive. A slow unfurl reads as premium, considered, significant.

Getting timing right is the difference between a logo animation that feels like brand communication and one that just looks like a logo moving.

Learning from the Classics

I regularly watch classic animation — not for stylistic reference but for timing and movement study. Observing how master animators handled weight, anticipation, and secondary motion has improved my motion design work more than any software tutorial.

The principles are principles for a reason. Learn them before you try to break them.