Animation in the Interface (CMU 05-430 Programming Usable Interfaces, Lecture 22)
A lecture adapting cartoon-animation technique to interface motion, organized around three groups of principles — Solidity, Exaggeration, and Reinforcement.
License: No open license — used with the author’s personal permission, not for redistribution
Key points
- Three groups of principles — Solidity, Exaggeration, and Reinforcement — adapt cartoon-animation technique to interface motion, on the premise that objects with apparent mass, timing, and follow-through read as more real and communicate state more clearly than abrupt, weightless transitions. See Motion Design.
- Solidity principles give an object a sense of physical mass: an object should never simply appear or vanish — it should always arrive from, and depart to, somewhere; squash and stretch an object slightly on impact or during rapid acceleration while preserving its apparent volume; and blur an object moving more than roughly half its own length within a single frame, so a fast-moving element reads as continuous motion rather than strobing.
- Exaggeration principles direct the user’s perception rather than changing the object itself: a brief counter-movement just before a main motion (anticipation) draws attention to what’s about to move, with faster motions needing more anticipation to avoid being missed; a trailing secondary element that keeps moving briefly after the primary motion stops (follow-through) signals that the whole assembly has real inertia. Exaggerating only a motion’s important parts while keeping everything else realistic lets the exaggerated part read by contrast, rather than the whole scene feeling cartoonish.
- Reinforcement principles cover the overall shape of a movement: motion should start slow, speed up through the middle, and end slow, mirroring how a real mass accelerates and decelerates and placing a motion’s most informative moments at its two ends; and objects should travel along gently curving arcs rather than straight lines, matching how jointed and gravity-driven motion actually moves.