Chapter 2

The 12 Principles, Adapted

Disney's principles, mapped to UI motion.

CSS animationmicro-interactions

Squash/stretch, anticipation, follow-through, staging, secondary action — re-read for interface motion, with the "Disney is Dead" counterpoint that UI motion solves a different problem.

In 1981 Disney animators Frank Thomas and Ollie Johnston distilled decades of studio craft into 12 principles of animation — squash and stretch, anticipation, follow-through, and the rest. Four decades later we keep reaching for that same vocabulary to describe a button press or a modal sliding in. The question this chapter asks is: how much of it actually transfers?

The twelve, in one breath

Thomas & Johnston's list, from The Illusion of Life: squash & stretch, anticipation, staging, straight-ahead vs pose-to-pose, follow-through & overlapping action, slow in & slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal. Some are about drawing a character (solid drawing, straight-ahead vs pose-to-pose) and barely touch interfaces. The rest describe how things move — and those map onto UI motion with surprising directness.

The mapping

The ten interface-relevant principles, each with a one-line gloss for UI:

Squash & stretch → button press states

Anticipation → pull-to-refresh resistance, pre-action hints

Staging → focus / dimming, backdrop scrim

Follow-through & overlapping action → modal overshoot-and-settle, staggered list reveals

Slow in / slow out → easing as affordance

Arcs → curved motion paths

Timing → the 200–500ms UI sweet spot

Secondary action → micro-interactions

Exaggeration → findability

Appeal → polish

▲

Counterpoint: “Disney is Dead” (Issara Willenskomer)

Not everyone buys the translation. In UI Animation Principles — Disney is Dead, Issara Willenskomer argues the 12 principles were built to make us empathize with a character — and an interface is not a character. UI motion, he claims, solves a different problem: maintaining the user's mental model as the screen changes. He proposes a separate set of concerns — timing & offset/delay, parenting, transformation, value & origin continuity, easing, and choreography — that govern whether a transition reads as one continuous space rather than a cut.

Treat this as a live debate, not a verdict. The Disney principles still describe how motion feels (weight, life, appeal); Willenskomer's lens better describes what a transition means (this element became that one; this panel owns the foreground now). Good product motion usually needs both — physical believability and continuity of the model.

Gallery: every principle, before & after

Each tile is a real CSS micro-interaction. Click a tile to replay it, toggle BEFORE/AFTER to see the motionless baseline, and drag intensity to scale the effect — the slider writes a --k custom property that the keyframes read live (squash amount, overshoot distance, stagger delay, arc, wind-up…).

Squash & stretch

A body deforms to convey weight and impact while conserving volume.

in UI: button press deforms then snaps back — the tap feels physical.

intensity ×1.00

Anticipation

A small reverse move before the main action telegraphs what's coming.

in UI: pull-to-refresh resistance, a button that dips before it launches.

intensity ×1.00

Staging

Direct the eye: one clear idea per shot, everything else subordinate.

in UI: dimming a backdrop / scrim so the dialog owns attention.

intensity ×1.00

Follow-through & overlap

Parts keep moving after the body stops and settle at different rates.

in UI: a modal flies in, overshoots, then settles back into place.

intensity ×1.00

Overlapping action

Offsetting the timing of related parts reads as life, not a rigid block.

in UI: list rows reveal in a stagger instead of all at once.

intensity ×1.00

Slow in / slow out

Things accelerate and decelerate; constant speed looks mechanical.

in UI: easing IS the affordance — ease-out for entrances, ease-in for exits.

intensity ×1.00

Arcs

Natural motion follows curved trajectories, not straight lines.

in UI: an item arcs into place (offset-path) instead of sliding linearly.

intensity ×1.00

Timing

Frame count sets weight and meaning; too fast or slow both mislead.

in UI: UI sweet spot ≈ 200–500ms. Drag intensity past 1 and it drags.

intensity ×1.00

Secondary action

A supporting move enriches the main one without stealing focus.

in UI: a like-button's heart fills AND a small burst confirms the tap.

intensity ×1.00

Exaggeration

Push the pose past realistic for clarity and read.

in UI: an error shakes; a badge pops — exaggerate to make it findable.

intensity ×1.00

Appeal

The thing is pleasant to watch — charisma, not just correctness.

in UI: a toggle that springs and glows feels crafted, earns trust.

intensity ×1.00

Featured: follow-through, dialed in

Follow-through and overlapping action are why a good modal doesn't just stop — it flies in, overshoots, and settles. Below, every part of that settle is a knob. The sliders feed CSS variables (--over, --dur, --squash) that the keyframes consume; hit replay to re-fire.

Modal overshoot-and-settle live demo

Confirm

overshoot 1× duration 380ms squash 0.6×

Overshoot 0 = a flat, lifeless arrival. Push past ~1.5 and it reads as bouncy/toylike — the sweet spot for product UI is a small overshoot with a fast settle.

Playground: squash + overshoot on a real button

The smallest complete example of two principles at once — pure CSS, no libraries. Press squashes the button (squash & stretch); release runs a back-out settle that stretches past rest before resolving (follow-through). Edit the :active scale and the settle keyframe to taste.