Island Menu

a pill of a nav bar that opens into a menu in two moves. tall first, a black slab rising off the bar, then wide, and only then does the menu arrive in it.

key insight: the two moves overlap by 30% and their order flips with the direction. a menu that grew tall then wide has to shrink wide then short, or the shape it passes through on the way out is one it never had on the way in. butted end to end they read as two animations, and a spring runs both axes at once, which reads as a zoom.

the width is measured against the stage, and the stage needs min-w-0 to be measurable at all: as a flex item at min-width: auto its used width is its own child's, so the ruler was elastic and the thing it measured was stretching it.