Note: works in safari, chrome, firefox (mask opacity is iffy)
Hamburger buttons are used to symbolify hidden menus all across the world, but when I came across this pretty awesome transition of a hamburger button by CreativeDash, I challenged myself with recreating it HTML.
Having never worked with animating SVG before I had a couple of ideas of how I wanted to approach the animated path.
Original Idea: One path.
My first thought was to create a simple path and animate a line along it, seemed simple enough right?
Of course not!
SVG paths CAN have an animated stroke that runs along the path, however this is created using two properties. ‘stroke-dasharray’ which makes a dashed line even spaces, and ‘stroke-dashoffset’ which moves the dashes. Most tutorials show this in use to animate a path in one direction, using a super long stroke length which in turn creates a super wide stroke gap when using a dashed line.
I needed the stroke to change widths AND end, and having a small initial starting width was impossible.
Introducing: SVG Masks.
Not very well supported cross browser (had to use two different methods to get working in chrome / firefox) I hatched the idea to create two paths.
- one small inital path which draws to the outside circle, which I would use as a mask and animate an html element behind to give the impression that the line is moving. (red stroke)
- and the outer ring which uses the widly used super massive ‘stroke-dasharray’ and ‘stroke-dashoffset’ to animate it. (black stroke)
Without the mask here is what is happening:
Many hours of frame by frame animations hand coded in css to get all the timing right and… tada!