Make it feel alive

I saw Toy Story in a theater in 1995 and spent the next decade assuming I'd end up at Pixar. I didn't. I ended up here, writing interfaces. It took me an embarrassingly long time to notice those are closer than they look.

The thing that got me wasn't the rendering. It was the moment the Luxo lamp hops. You believe a desk lamp has an inner life, and nobody had to tell you. That belief is manufactured, deliberately, by people who wrote down the rules.

The rules were written in 1981

Ollie Johnston and Frank Thomas — two of Disney's Nine Old Men — published twelve principles of animation. Most of them are about drawing. Three of them are about software, and nobody told us.

Squash and stretch. Mass is communicated by deformation. A ball that doesn't deform reads as a stone. A button that doesn't respond to press reads as an image of a button. This is why a 2px scale-down on :active changes how solid a control feels — you are telling the user it has mass.

Anticipation. Before a character leaps, it crouches. The crouch is what makes the leap legible. In interfaces, this is the thing almost everyone skips: we animate the arrival and not the departure. A menu that expands from nothing is a menu that teleported. A menu that compresses 2px before it opens is a menu that decided to open.

Follow-through and overlapping action. Parts of a body arrive at different times. When every element in a list animates on the same tick, you get a military parade. When they arrive 60ms apart, you get something breathing. Stagger is not decoration. It is the difference between a group of things and a thing made of parts.

What this looks like in code

The honest version is that most of this is easing curves and delay values, and most teams ship the defaults.

// the default: linear-in-disguise, arrives like a freight elevator
transition: "transform 300ms ease-in-out";

// with anticipation: overshoots slightly, settles back
transition: "transform 420ms cubic-bezier(0.22, 1, 0.36, 1)";

That second curve is the one this whole site uses. It overshoots and settles. Nothing in the physical world arrives at its destination and stops dead, and your eye knows it even when you can't say why.

The audience never notices good animation. They notice its absence, and they call it "cheap."

Where it actually matters

Not everywhere. This is the part that separates craft from indulgence.

Motion should carry information. A spinner that spins forever tells you nothing except that the page hasn't given up. A progress bar that moves at a rate proportional to real work tells you whether to wait or make coffee. The first is decoration. The second is a message.

The test I use: remove the animation and see if the interface loses meaning. If the answer is no, the animation was for me, not the user. Cut it.

The lamp hops because Pixar needed you to believe it was alive before the short could work. Your loading state has the same job and thirty fewer frames. Spend them carefully.