The Animation Principles

The twelve principles of animation were developed by Disney animators Frank Thomas and Ollie Johnston in the 1930s. They describe what makes motion feel alive, physical, and believable. Interface animation follows the same rules.

Squash and stretch

Objects that move have physical mass — they deform slightly when they accelerate and decelerate. In interfaces, subtle scale changes on press (a button that compresses slightly) or a bouncing element that stretches at peak velocity make motion feel physical rather than mechanical. Applied too aggressively, squash and stretch feels cartoonish. Applied subtly, it feels alive.

Anticipation

An object preparing to move signals the movement before it happens — a brief contrary motion that sets up the main action. In interfaces, a button that dips slightly before the action completes, or a panel that shifts inward before sliding out, creates a brief preparation that makes the subsequent motion feel purposeful rather than sudden. Anticipation is most valuable for significant, irreversible actions.

Follow-through and overlapping action

When a moving object stops, not everything stops at once — some parts continue briefly before settling. In interfaces this manifests as spring physics: an element that overshoots its target position slightly before settling back. It also applies to multi-element animations where related elements continue moving briefly after the primary element has stopped. The result feels physical rather than purely mechanical.

Ease in and ease out

Very little in the natural world moves at a constant speed. Objects accelerate into motion and decelerate before stopping. Linear animation — constant velocity from start to finish — feels mechanical and artificial. Eased motion — starting slow, accelerating through the middle, decelerating to rest — matches physical expectation. This principle is so fundamental it has its own article: Easing.

Secondary action

The main action is accompanied by smaller supporting actions that enrich the motion without distracting from it. A notification icon that pulses while a badge count increments. A list that compresses slightly as an item is removed. Secondary actions add depth and reinforce the narrative of the primary action — but they must remain subordinate to it.

The takeaway

These principles are not rules to apply mechanically — they are observations about what makes motion feel believable. When an animation feels wrong without a clear reason, these principles are often the diagnosis: the motion is too linear, too instant in its stop, or too uniform in its scale. Apply them as a vocabulary for identifying and fixing motion that does not feel right.