- Today, we're going to create
an animated hamburger menu. And this type of animation
alluded me for years. It looks so cool and so complicated. Then I ran across this medium post where Michael explained
how to achieve this effect. So I wanna give credit
where credit is due. So I'll put a link in
the description below, but check it out. It's also worth mentioning that Michael, this same guy, has a code
pin with several hamburgers in different variations. They're all using this same method. Again, link below. As we build this out, you'll see I'm only modifying two
properties on an SVG, that's it. But this type of effect can be used on all kinds of animations. So, let's get into it. (upbeat music) If you're new to Self Teach Me channel, my name is Amy Dutton. I'm a web designer and developer. If you're looking to get into this space, sometimes it's hard to know where to start and what resources to trust. I wanna help you level up and
get to where you wanna be. If this sounds interesting to you, hit the subscribe button below. Before we jump in, I also wanted to point
out that I have timestamps in the description below
if you wanna jump around. Okay, I'm gonna start in Illustrator, and I want you to see how we
can create this from scratch. If you don't have access to Illustrator, Inkscape is a free alternative, and I'll include a link
in the description below. Within a new Illustrator file, I'm gonna draw the three lines that I need for my hamburger menu. So I'm gonna select the line tool, and I could click and drag to draw a line, but I would like to
use nice round numbers. So if I simply click on the canvas, a dialogue model will pop up asking me to specify
the length of the line. So we'll make this 25 pixels. I'm on a Mac, so I'm gonna
hold down the Alt key and click and drag to duplicate the line. Then I can hit Command + D to duplicate the line a third time. And the third line is
automatically spaced equally. Cool, so let's draw the x, and I want the lines in
the x to be the same length as the lines in the hamburger menu. So let's copy the middle line. So I'm gonna hit Command + C, and then I'm gonna hit Command + F to paste the line in the exact same place in front of the existing middle line. So if we look at our layers
panel, I have the bottom line, two copies of the middle line, and then the top line, perfect. With the middle line selected, if I move the cursor
to the end of the line you'll see that the cursor changes. Now I can click and
drag to rotate the line, and I'm gonna hold down the Shift key as I rotate the line so that
it will snap to 45 degrees. Okay, I'm gonna do the same
thing for the other side. I'm gonna hit Command + C to copy, and Command + F to paste in front, and then I want to rotate it around. Okay, perfect. Now we need to connect
the top and bottom lines and the hamburger menu to the appropriate cross section of the x. And this is the path that the
line will be animating along. I'm gonna hit P to activate the pin tool. And if I hover over the
end of the top line, you'll see that a point highlights. I'm gonna click here so that it will extend the existing line. And then I'm gonna create a second point. If I click and drag it
will adjust the arc. Then I'm gonna hover over
the end of the cross section, and you'll see a point appear. And if I click here, it will
connect the paths for me. I'm gonna hit a to use
the direct selection tool, and I can move the
point on the arc around, and adjust the handles to
get the curve just right. Now, I could go through the same process for the bottom line on the hamburger but I actually want the two
curves to match exactly. So with the new path selected, I'm gonna hit Command + C and
Command + F to paste in front, and then let's flip it. So I'm gonna go to object,
transform, reflect. We wanna select horizontal
in the dialog pop-up and hit okay. Now let's click and drag this into place, and we can use the
existing paths as a guide. Perfect. Okay, so once it's in place,
we can delete the old lines. To do this easily, I can just shift, click the
lines that we wanna keep. And now, if I, still
holding down the Shift key, click and drag, when I release, only the paths that I wanna
delete will be highlighted. So I'm gonna hit delete,
and we have our asset. Before I export our file, I'm going to open up the layers
panel and name everything, and this will just make
it easier to identify all of our paths within our code. So I'm going to name the top line top, the middle line middle, and the bottom line bottom,
pretty straightforward. Now let's export this as an SVG. So I'm gonna go to
file, export, export as, and I wanna save this as an SVG, and we can just call this hamburger. Then Illustrator is gonna
show us some settings. So I want the styling to appear within the SVG so we can
keep our internal CSS. We're not using a font or an image inside, so it doesn't really
matter what we select here. For object IDs, I want to use the layer
names that we created. Sometimes SVGs can have
some crazy long numbers, so let's limit the decimal points to two. And I don't wanna minify it. Minifying would be fine if we were just gonna
use the SVG as it is. But since we want to
modify it within the code, it will make it harder to
work with if it's modified. And then we don't want
it to be responsive. And that might sound a
little counterintuitive, but if it's responsive,
it will remove the width and height attributes so
the SVG will fill the space. And we don't want that, it
would be large and in charge. Now let's move this over to the code. So I'm gonna hit okay, and
that will save out our file. Okay, great. Now let's move over to the code, and I'm gonna build this within CodePen. And if you've never used CodePen before, it's a coding sandbox that's
great for experimenting and sharing code snippets. Everything we're doing today,
you can do on a free account. First, I'm gonna open
the file within VS code, and I'm gonna select
everything, give that a copy. And then I'm gonna paste it
into the HTML panel of CodePen. Now, first things first, let's
clean this up a little bit. So if I come to the top,
there's a def section that defines our style. So I'm gonna move this into our CSS panel, so give that a copy and a paste, and now we can delete
this block from our HTML. Okay, I'm gonna give this a save, now kinda clean things up a little bit. I'm gonna rename our class
from CLS one to line, just to make it more readable. And we'll need to update
this within the CSS and within our HTML. So line, line and line. Perfect. Now let's wrap our SVG with a div and give it a class of wrapper. And in our CSS, let's add
some styles for our wrapper. So I'm gonna give this a height of 100 VH, a width of 100 VW, so that it expands the entire width and height
of the viewport area. Then I'm gonna give
this a display of flex, and set justify content to center so that it's centered horizontally and align items so that it's
set to center vertically. Okay, let's make our
SVG a little bit bigger so that it's a little bit easier to see. So I'm gonna change the
width and height attributes on the SVG tag to 100. Let's also make the line
a little bit thicker. So in our CSS, let's add
a stroke width property to our line class and
set it to three pixels. Okay, perfect, except now it's cutting off the line on our SVG. And this is because of our view box. And you can think of what
view box is a window. So I'm going to change these
values to say, 35 by 30. I'm just making something up, but you can see now it's
not getting cut off anymore. Okay, perfect. Perfect, all of our pieces are in place. And as I mentioned earlier, we're really just gonna adjust two values, stroke-offset and stroke-array. Jake Archibald actually
has a great blog post that shows how these two
properties work together. And I'm gonna pull up a site really quick because there's a demo
that demonstrates this. So if we scroll down here,
you'll see here's the demo. So if we move this slider,
you can see the dash array property changes the dashes and the gaps. And the dash offset property offsets or shifts the line over. Hopefully you're starting to see how we can use these
properties to our advantage. We wanna set the stroke-array property so that the dash is the
length of our hamburger line and the cross section of our x. Remember they're the same length. Then we wanna set the gap so that the rest of the line is hidden. It's gonna take a little fiddling to dial these properties in just right. But my little trick is
that the middle line is just a straight line. If you look at the code,
it's using the line tag and not the path tag since
there are only two points, it has a starting point
and an ending point. And if you think about graph paper and plotting these points, the
y values should be the same. Yeah, 13.48. So let's subtract x two from x one and we'll have the length. And here x one is zero, so that's why you don't
see it in the list. 25 minus zero is 25. Let's plug that in for
our dash and for the gap, let's double it. So we'll just say 50. Within our CSS, I can use the path tag since our middle line
is using the line tag. So let's say path/-array. And we said 25 for the
dash and 50 for the gap. I'm gonna open this up in debug mode. In CodePen each of these
panels is an I frame. So if you try to use your Chrome
developer tools, it works, but you might see a lot
of other tags in there. So by switching to debug mode,
it will show us the preview. I say, change view, and we
want to go to debug mode. I'm gonna open up my
Chrome developer tools. So Command + Alt + I,
and this'll make it just a little bit easier to
dial these numbers in. I'm gonna click on the little
arrow at the top of the panel and now I can click on our SVG. So that will show us the
location in our code. For now, I'm gonna select the bottom line and set the display to
none, just to hide it. I'm gonna select the top line
with our developer tools. And let's find where it says /- array. And I'm gonna click on the value. And now I can use my arrow
keys to adjust the numbers. I'm gonna play with this
gap for a little bit. If I come down, you can
start to see it come in. So we want it to be just at 45. Now let's set the stroke-offset. And if I hit enter, it will create a new
property for us on our path. So let's set stroke-offset,
and I'm gonna start with 30. I wanna shift these values so that we can see the straight
line for our hamburger. Okay, so same as before, I'm just using my up and down arrow keys to dial that number in. Okay, so 25. Now, if I go back to our bottom line, and we wanna turn off the display none. We'll see that those same values
worked for the bottom line. So I'm gonna copy these and
paste them into our CSS. Now, we just need to animate everything. And for now, I'm just gonna
use vanilla JavaScript to add and remove a class. So first let's style it. I'm gonna wrap our SVG with a button tag. This will keep things nice and semantic. So real quick, let's add
some styling to our button to remove the browser's default styles. So save button, remove the
background and remove the border. Now let's say when our
button has a class of x, we want the hamburger to change into an x. At the bottom of our CSS,
we can be more specific about overriding the styles above it. When there's a class of x, we want the middle line to disappear. Then we wanna target the
top and bottom lines, and set the /-offset to 25. And we'll change this one to zero. Perfect Perfect. Now, to animate
between these states, we're just gonna use vanilla JavaScript. So I'm gonna start by creating a variable that we can hook onto so we
can call our variable element. And the easiest way to grab
an HTML element is by an ID. Let's add an ID of
hamburger onto our button. And while we're over here,
let's remove our x class. And back on the JavaScript
panel, we can target this by saying document.get element by ID, and we're grabbing the hamburger. Now when we click on that element, we want something to happen. Element.on click, and
it will run a function. Let's start by just adding a class of x. So I'm gonna say element.class list add x. Let's give this a try. Awesome. It worked, but it jumped into place. So we can smooth out the transition by adding a CSS transition property. And remember, we want it
to be on our default state. Here at the top, let's add some styles for
our top and bottom line, and we're creating a transition
for the /-offset property. And we want it to take half a second. And normally I just use ease and out, but I want this to have a
little bit more balance. So let's use the same
curve that Google does in their material design UI. So cubic Bezier 0.40, 0.21. And I know these numbers
look a little strange, but they're defining where
the points are on a curve. Okay, so next we wanna do the same thing for the middle line, except this time we are
targeting the opacity property. Okay, perfect. Now we just need to flip
back to the hamburger. Let's test this out. Oh, that's strange. What's happening is, it's
actually going backwards. Instead of looping around, it's coming in from the other direction. Let's go back to our debug mode, and I believe we can change the offset and use a negative number instead. Perfect, so negative 45. So if we come down here to the bottom, change this to negative
45, give it a save. And now let's test it. Perfect. Now we just need to flip
it back to the hamburger. So let's rework our on click
function within JavaScript. And let's check to see
if the x class exists. If it does, then we want to remove it. I'm gonna say if
element.class list contains x, then we want to remove it. And copy this, paste it. And let's add an else. Give that a save and test it. Done. You can do a lot with this one technique. In fact, as a little experiment, I put another code pin together where I built a radiating heart. I'll include a link in
the description below if you wanna check it out.
It works the exact same way. The only difference is that instead of clicking to remove the class, I set a timer to
automatically remove the class after I gave some time
for the animation to run. The other little trick is usually, you wanna add the transition
property to the default state so that it will animate
forwards and backwards. But here we only want
it to animate forwards, so I put the transition property on the radiate line class
instead of the line class. I'll include links to
both of these code pins in the description below. Feel free to download
it, fork it, modify it, whatever, it's yours. If you like this video, and wanna see more videos on
web design and development, be sure to hit the subscribe button below. Hit the bell icon to receive notifications when new videos are posted. Until then, keep coding. (upbeat music)
