The old principles, filtered for a screen seen four hundred times

A different viewing contract

The twelve principles of animation were written at Disney for film. Film is watched once, in the dark, with attention. An interface is watched hundreds of times, on a bus, by somebody trying to do something else. A motion graphic on social sits in the middle: watched once by most people, forty times by whoever made it.

That difference is the filter. A principle designed to hold attention on a single viewing can be actively hostile at the four-hundredth.

Here is each one with a verdict.

Survives without modification

Slow in and slow out. This is easing. It is not a stylistic choice; it is the difference between motion and teleportation with a delay.

Timing. How long something takes is still the primary carrier of weight and meaning. Nothing has replaced it.

Arcs. Still true, still mostly ignored, still free.

Staging. Arguably more important on a screen than on film, because the viewer can look away and there is no director controlling the cut. If two things move at once and neither is dominant, both are missed.

Solid drawing. Originally about drawing volume convincingly. It survives as: respect the geometry. If a card has a perspective, keep it consistent; if a shape has a light source, do not let it move independently of the shape.

Survives with a restriction

Follow-through and overlapping action. Yes, for secondary elements. Never for the control under the finger, for the reason in the previous lesson.

Secondary action. Yes, when it carries information. A shadow that spreads as a card rises tells you about height. A sparkle tells you nothing.

Appeal. Survives as brand fit. It is a real constraint and it is not a personal preference: a bank and a game want different motion, and the difference is measurable in duration and overshoot before it is anything else.

Straight-ahead and pose-to-pose. Pose-to-pose is what keyframing is; you set the extremes and let the machine fill in. Straight-ahead (drawing every frame in order) survives in frame-by-frame work, and is exactly what Blender’s grease pencil and Krita’s animation timeline are for. It produces motion no interpolation would ever generate, at a cost of hours.

Dangerous, and here is the mechanism

Anticipation. In film, a character winds up before a throw, and the wind-up is what makes the throw read. In an interface, anticipation means moving away from where the user asked you to go before going there. That is time added between the input and the answer, and the answer is what they wanted. Anticipation on a tap response is a bug.

Where it still works on a screen: in motion that nobody is waiting on. A logo sting can wind up. A page transition triggered by the system can. A button cannot.

Squash and stretch. Designed for bodies made of flesh, which deform. A card in an interface represents a rigid object, and stretching it reads as rubber rather than as speed. But the principle underneath (that a change of shape communicates force) survives at small amplitudes. A 2 to 4% squash on a button press is felt and not seen; a 20% squash is a cartoon.

The other risk is that squash and stretch applied to text makes the letterforms wrong. Scaling type non-uniformly is a typographic error that happens to be animated.

Exaggeration. The principle most damaged by the viewing contract. Exaggeration is what makes a single viewing legible and memorable. It is also what makes the four-hundredth viewing unbearable. The practical rule: the more often a motion will be seen, the closer to literal it should be. A splash screen can be exaggerated; a keyboard cannot.

The test worth applying

Before shipping any interface motion, watch it twenty times in a row. Not twice: twenty. Almost every motion that is too long, too bouncy, or too clever fails this and nothing else catches it. The first viewing tells you whether it is charming. The twentieth tells you whether you can live with it.

For motion graphics destined to be watched once, invert the test: show it to somebody who has never seen it, once, and then ask them what it said. If they can tell you, exaggeration did its job.

What the principles do not cover

They were written before screens that talk back. Nothing in the twelve addresses interruption, gesture tracking, reduced-motion preferences, or a state machine with six states and twenty transitions between them. Those are new problems, and the honest position is that the field has not settled on answers for them the way it settled on easing. Treat the twelve as a good foundation with known gaps, not as a complete theory.