Line-Animated Hamburger Menu
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.
CodePen Embed Fallback
The trick is that the top and bottom lines aren’t just a straight <line /> but a 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 to Article — Permalink
The post Line-Animated Hamburger Menu appeared first on CSS-Tricks.
