Burger Morph

NavigationVanilla JS · zero dependenciesthree bars, one open flag

-- fps

prefers-reduced-motion detected — no auto toggle; click still works

X-ray · layers

Morphthe bars rotate to cross into an X (off = they just stack)

Middlethe middle bar fades out when open (off = it stays)

Spinthe whole icon rotates as it morphs

Parameters

Speed350 ms

Thickness4 px

Bar gap8 px

Roundness2 px

your version · updates as you tinker

How this effect works

The icon is just three bars and a single boolean: open. When it's closed, the bars sit at -gap, 0 and +gap — a hamburger. When it opens, the top and bottom bars slide to the center (translateY 0) and rotate +45° and −45°, so they cross into an X. The middle bar simply fades out, because an X has no middle. Every bit of it is a CSS transition on a transform, so the browser tweens it smoothly for free.

Flip morph off and the bars still stack in the center but don't rotate — you see that the rotation is what makes the X. Flip middle off and the fade stops, so the third bar hangs around in the X (which is exactly wrong — that's the point). Spin rotates the whole button 180° as it goes, and gap, thickness and roundness restyle the bars live. Click it, or watch it toggle on its own.

Production notes: respects prefers-reduced-motion (no auto toggle) · three transformed bars, no layout thrash · it's a real button — Space/Enter toggle · the copied snippet is self-contained HTML + CSS + JS.