Line-Animated Hamburger Menu

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS.

The trick is that the top and bottom lines aren’t just a straight <line /> but a <path /> that curves up, down, and around forming the cross. You can only see part of the line (making it appear straight at first) because the stroke-dasharray only reveals part of the line. Then, by animating both the stroke-dasharray and stroke-dashoffset, the ✕ is formed.

Direct Link →