Origin-aware animation

A panel that scales up has to scale up from somewhere, and that somewhere is a design decision the default hides. transform-origin starts at the centre of the box, so an unconsidered entrance blooms outward in every direction at once, from a point the reader was not looking at. Move the origin onto the corner nearest the button that was pressed and the same 300 milliseconds say something different: this came out of that. The press and the appearance become one event instead of two, and nobody has to work out which control produced the thing now covering half the screen.

The mechanism is small. The origin is expressed in the panel’s own coordinates (0% 0% for its top-left corner, 100% 0% for its top-right), so a menu that can open from three different triggers needs three origins and, usually, three positions to match. The harder version is a panel whose anchor is not one of its own corners, a card growing out of a thumbnail somewhere else on the page: there the origin is a computed percentage or a pixel pair, and at that point the technique shades into a morph transition or a view transition, where the browser is asked to interpolate between two real boxes rather than to fake the relationship with a scale.

There is a reason this is worth spending attention on. A popover is already anchored in space: it points at its trigger, it closes when you press Escape, it moves with the button on scroll. The entrance is the one moment where all that anchoring can be contradicted, and a centre-origin scale contradicts it every time. The same logic runs in reverse for pinch to zoom, where the origin is not a designer’s choice at all but the midpoint between two fingers: the content grows out of the spot being held, because growing out of anything else would feel like the picture had been swapped rather than magnified.

Two practical notes. Scaling a panel scales its text and its border with it, which is why the convincing version usually pairs a modest scale (0.9 to 1, not 0.2 to 1) with an opacity fade and lets the fade do most of the work. And an origin is only honest while the panel stays where it was put: a menu that flips above its trigger because it ran out of room below has to flip its origin at the same moment, or the entrance will point at a button that is no longer underneath it.