 Hamburger menus are on every website these days, and they're kind of boring when they're just sitting there, but they're one of those things that we can use to add a nice little whimsical touch to our page, doing a little animation like this one, or maybe like this, or even like this one right here. And hello, my front-end friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin, and here at my channel, I help you fall madly, deeply in love with CSS. And today we're going to be doing that by looking at transitions and animations with CSS and sort of how we can sort of push the bounds of stuff. We're also going to dive into the wonderful world that is SVGs to see that they're not actually as scary as they sometimes can see at first, and they allow us to do these really cool things. And so we're going to start off by doing a relatively simple one that we can even do with like spans or other stuff. But then we're going to step our game up to like an intermediate button that does a little bit more, and we're going to take advantage of how SVGs work. And then we'll get to that last example, really step up our game and have some fun. And that one really pushes what you can do with SVGs that you wouldn't ordinarily be able to do if you were just playing around with simple divs or spans. So to get started with it, we have these three button classes here that we're going to be playing around with. And I've set up a simple little example container that's just going to get them to go next to one another with Flex. We haven't styled anything on these. We haven't done anything on them yet. And we're going to be starting in the HTML here because as I said, we're going to be playing around with SVGs. And for the most part, we're actually going to write them from scratch to try and understand them a little bit better. One of the reasons I'm using SVGs rather than say three spans or something like that is especially with the second and third examples, there's things that you can do with SVGs that you just can't do with a regular div or a span or whatever it is that you might be wanting to play around with. And so yeah, it opens up other possibilities. And as I said, they're a lot simpler to actually manipulate and play with and create by hand than you might realize. Now, before I do anything else, this is a button and we're going to be playing around obviously with the idea of buttons that would open and close a menu. So a few things that you'd probably want on your button as well would be in area controls to say, you know, what is this controlling? When I click this, what are we opening? So say that might be your primary navigation or something like that, which would be looking at an ID of primary navigation. And so this gives extra context to know what the button is actually controlling. And again, that's linked through an ID. And then you'd probably also have an area expanded is equal to false to start with. And this is saying is that menu opened or closed. So right now, as a default, it's probably closed. And then you'd actually switch this with JavaScript to turn it over to enabled. If it's not a menu that's necessarily opening and closing, but there's other stuff, you also have an area pressed, which is it like in the press state or not. So if it's not a menu that's opening, but you're doing something else with a button, you might want to use that instead. But for a menu, I do think the area expanded does make more sense. I'm not going to go into that for this video. It's a little bit out of scope. I just want to focus on the SVG animations. But I do have other videos where I have looked at that. And I'll mention it again at the end, just in case you're interested to learn more. Now, as I said, we're going to be doing some SVG. So we're going to write in SVG because we need one of those. And I'm just going to come in here and give this the class of hamburger because it makes it a bit easier to select. Though I don't know if we're going to have to select the hamburger itself. Now, one thing that's always a little bit weird with SVGs is the view box. I'm going to do a 0, 0, 100, 100. And we're actually going to play around with that a bit, probably on the third one. But what this is basically saying is, SVGs have like this infinite canvas, which is this weird thing. But basically, this is like what part of the canvas are we looking at? So we're going from like the 0, 0 coordinate to where we have like this 100 grid that we've basically saying that we're going to look at that part of the canvas. You often see this and by working on 100, it just simplifies things a little bit, basically. So that's why usually you see a view box like that. I'm also going to come here and give it a width. And I'm going to give it 250, which is pretty big for this example. I wouldn't actually do that big for in reality, because as you can see, it makes for a large button. But for demo purposes, it's perfect. But you might want to play with that number a little bit. Now, for this first one, we're going to use a wreck. We're going to create rectangles because I want to look at how we can do rectangles and sort of round corners off and stuff like that with those. And in the other examples, we're going to look at paths rather than rectangles, but both of them can create what we need. And basically, we're going to need three rectangles, but let's create the first one. And I'm going to shrink this down so we can actually see it like showing up on the page as we do this. I am going to give it a class is equal to top because it's going to be like my top bar. So just hamburger and then top line top bar or something like that. Again, this is just for a demo. So we're going to call it top. And then we get to the SVG stuff to actually get it to dry out. Now, with a rectangle, one of the nice things with it is you can just give it a width and a height. And because I know I'm working on this like 100 scale, basically. And the width and the height are going to be based on this and not my width of 250 here. So that is important because we're in SVG world. We're in the view box world. So I want to take up most of that space, but not all of it. So I'm going to do a width of 80. And this is why the 100 is nice here because you're basically working in percentages, which just makes life nice and simple. And we'll throw a height of 10 on there. Let's say we probably, oh, we do see something. I wasn't sure if we'd have to give it a fill or not, but there we go. We see something coming in right there. A couple of other things we can do is move it around a little bit inside that space. So what I'm actually going to do here, we can just put each one of these attributes on like different lines just to make it a little easier to see for the video. And the next we can do is give it an X coordinate. So X, I'm going to say we can do 10. And then we can give it a, so that's going to be starting where, so you can see it's moved over. And so if I do 10 plus 80 is 90. So you have 10 here, then we have the 80 and that would leave 10 on this side. So it's perfectly centered. And then I want to move it down a little bit. So for that I can use the Y. And so my Y in this case, let's go with a 30 to position it there. And so let's just move this down. So we have our first rectangle right there. I'm just going to copy this. We're going to paste that one and paste that one. So we have three. This will be my middle rectangle and this will be my bottom rectangle. And what we'll do is everything should stay the same, but this one can go down to 50 and this one can go to 70. And then we get three bars and they're not quite centered. So maybe I have to adjust my numbers here a little bit. 25, 45 and 65. There we go. That looks better. I'm going to stick with that. And I could leave it just like this if I wanted to. Or we could round off the corners if you prefer that. And if you're used to CSS, you do a border radius or something. With this, it's our X. And then we can just give it a number. But the number here, it is the radius, but we want to be careful because if you do too big. So say I did 10, it actually gives it, it's like a border radius in CSS. If the number is too big, it gets really ugly looking and overly shaped. So basically we want it to be half of whatever my X value is. So if I do that, it gives me a nice, perfect round corners. I think that looks pretty good. So I'm going to copy that and we'll paste it on both of these right there. And I like that a little better. So one other thing actually before we move to the next step here, I am just going to come into each one of these. We're also going to put the class of line. So it's my hamburger line and then my line top, middle and bottom. It's just going to make it, if we need to style all of them together, it's very easy, but if we want to do individual ones, we also can select each one individually. And of course you could do like line, double, you know, you might want to do something like that as well if you're into BEM or just to sort of indicate that it's really part of your hamburger, whatever you want. But just for simplicity, we're going to keep it like this for now. And now we can do the fun part of animating this one. So for this one, let's come down and we'll put a little comment here, button one. And we're also, we're going to look at a few things. Or actually let's just come here and just do all of my buttons. We could put a class there. I think I did, we just did button one. So we'll just do this. So all my buttons look basically the same until we get to the animations. So let's just do a background that's transparent on there. So the backgrounds disappear. We can do a border radius of maybe one RAM to round those off. We have the round ends here. So it makes sense to have round here as well. And the last thing I'm going to do is let's give this a border itself and we'll make it a bit bigger, 10 pixels solid. And again, if this was a little hamburger, we could make this 10 a lot smaller, but we'll do 10 pixels solid. And there we go. We sort of get sort of an icon coming in like this. One nice thing before we get to the animation, one nice thing would be if the color of the background or the border, not the background, the border and the color of this could be the same. And luckily that's actually pretty easy to do where we can come in with a custom property. And I'll just call it button color, I guess, for my custom property. But obviously that's made all those borders disappear because it isn't an actual color. So we could give it that fallback. Let's just put it back to have black if nothing is provided. But what we could do then is we're going to do two things. Let's come here for button one, so dot button one. And we could say that my button color is blue just so we can see that changes. And if we want these to also change at the same time, I can just come all the way up on my SVG. And we could do separate ones for each rectangle here if you wanted to as well. I'm going to say that the fill for the entire SVG is my var. And this is one of the cool things with custom properties. We said button color. And now they're all linked together because it's using that as my fill. You can even do this fill with CSS as well. So instead of having, you know, I could have my button one or it's my dot hamburger. So, you know, if I just did dot hamburger, you can also do fill here and do the exact same thing, whichever way you prefer working. But now the nice thing with it is you come in with your number and it changes both at the same time, which is super cool and nice. I like it's nice to be able to control both of them at the same time. You can see this one's different from those two because we're only doing this for my button number one. Perfect. So that's there. And now we can actually start animating things. And for what I want to do with this one is we're going to start by smooshing them all together and then turning them into an X. So some fun little animations and stuff that we have to get into. So this one we could definitely do without it being SVG. If this was three spans, it would work basically exactly the same way. And if you remember, I said I wouldn't talk completely about it. I'm not going to go too much into the area controls but we could take advantage actually of this area expanded to link into here a little bit and sort of force some proper accessibility because what we could say now is button one, we want to choose the SVG itself. So it's dot hamburger. And I'm going to have to nest everything within button one here. You probably wouldn't have to do all of these steps. Or if you're using SAS obviously, hamburger. Or actually I want to do the lines. So I don't need that. I just need to get the line class itself. So all the lines that are inside of button one, let's just do a fill of red to see that we have actually selected those ones. So that's perfect. But what we want to do is add a transition here. So we're going to do a transition. Let's just say for now it's going to be one second and leave it like that. And we can come back to the transition if we need to to fix it up a little bit. And the other thing that's going to make our life a little bit easier is the transform origin, transform origin, which we can also come back to. But for now we're just going to do center and if you've never seen this before, we'll circle back to it so you know what it actually does. And then what I want to do is go to my button one. But as I said, we can hook into that area, expand it, expand it is equal to true. And when it is expanded, we can change stuff on it. So what we could do now is I don't actually need to change the button itself. We could actually do a bunch of custom properties. So it's all being controlled from here, but I'm just going to come here and we're going to say top. Let's start with that one. And for now, let's just say that the, or you know what for now I'm going to do this as a hover just to make it really easy. Then we'll come back and do the JavaScript for it. So my button one hover and the dot top. It's going to be a little bit easier to just for testing purposes to have it with a hover. So if you remember, we have an X and a Y value. So actually I don't want to change the X. I want to change the Y and the Y value is how high it was up. So all of them had the same X value of 10, but we have a 25 or 45 and a 65. So basically I want this top one to go and push and on top of that one. So to be able to do that, we could say Y. And then we could just say is going to change to 45 and we're transitioning every property on these lines. So if I hit save on that, we should see it works. Look at that. Now you will notice that I am getting a little linting error here from VS code saying this isn't a CSS property, but it's an SVG property which you can control with CSS. So actually this we could do, we want for our top and our bottom both to go to the same spot. So we could use either an is or aware here. If you're not familiar with this, it's just makes it so we can say is top bottom like that instead of having to have the whole selector all over again. And now both of them move together. Super cool. So you can see where we're going with this, hopefully. The next thing we're going to say is let's just copy or we'll duplicate that. But we're only going to do the top one now. So just the top. That means we don't need is on here. And then we can do a rotate, rotate of 45 degrees. And if you didn't know the rotation property or like transform properties trends, what is it? Translate, rotate and scale. They're their own properties now. Browser support's not perfect, but it's actually pretty good. So we can do a 45 and a negative 45. So then they're also going to cross. Now, if I took off this part, let's just take off. Like I was having them come together. And if I didn't do that, this would happen. But because they're moving together with this Y is 45, that means they move together and then they're crossing based on the center. And the reason they're crossing on the center is my transform origin. If I didn't have this, that would also muck the whole thing up and get some crazy weird stuff going on. So we're saying we're transforming from the center and so they're going, they're meeting in the middle and then crossing. The only thing that's kind of annoying now, well first of all we have a star and we probably want to get rid of that middle one. So let's do that one first actually. We'll come here. And here we can do middle. And the easiest thing is just to change the opacity. Opacity is going to become zero. And so it sort of can fade out as the other ones cross. You might be happy with that, but this, we're going simple, medium and expert, whatever you want to call it. But this is a little too simple for me. So I like having a little bit of fun with my transitions and stuff like that. So we can make this one a lot better basically by playing around with my transitions here a lot more. So what we're actually going to do is we're going to, and I'm doing this for all of them just because it just so happens to work. We could also set up different transitions for different properties or like different, like the top, the bottom, the middle. We could do them all independently if we had to. But just because only one of them is getting the opacity changed and they're both sharing the rotation and the Y movement, we can do this all sort of as one big transition because we can transition multiple properties with different timing functions and stuff. And so all we have to do on this transition, let's start by saying, we'll say that the Y one is going to transition over 300 milliseconds. We'll do an ease in. Let's just save that and see what that looks like. So you can see we busted everything now. So that should be 300 milliseconds going down. The reason it's really busted is nothing else is animating but you can see when I lift it. So when we come off, we can see it's slowly doing that. So the next thing we could do is my rotate is 300 milliseconds and ease in. So if I do that, I think we're sort of back to where we were except that middle line is disappearing. But what's cool now is we can put in a delay on the rotation. So let's say we're going to delay that rotation by 300 and that's because I want this animation to finish. So whatever this number is, I want it to be the same as this one. So let's hit save. They come together and then they cross. Now it's really ugly going the other way. It's a little broken. We can fix that. But this way it's working. Now to fix, let's fix that opacity one that's in the middle. So we can say opacity. The trick for this one is it's going to be a zero millisecond long animation, but we're going to delay it by 300 milliseconds. So opacity except here should be a comma. So we do the transition of 300 down. Then the opacity is going to transition instantly right as they overlap and then it's going to turn into our X. So if I hit save, there we go. Now it's still broken the other way, but that's fine. To fix that, I'm going to take this. We'll just duplicate this whole thing. Now I don't need to replicate my transform origin. What we want to do now is on the other way around when we're reversing things, we actually need to the delay to be on this first one up here and not on the rotation. So we can just remove it that way. You can reorder things if the order here makes, if you like having them in chronological order. So now, except here, we have the same thing twice. This is going to actually, yeah, sorry, let's move this entire one up. So I'm going to do a cut and paste it. So this weird one is the first one and this other one is when we hover. So now, oh, we're still broken. Oh, right, we need the transform origin always to be on this first one and not on the hover state. So there we go. And there we go. When we're doing our forward animation is the hover one. So first we're doing our Y coming down. Then we're doing our rotate. Then when we're not hovering, because this is only for when we are hovering, when we're not hovering, it's going to go back to this one. And this one has first the rotation. So we're going from this to, from the X to on rotating, 300 milliseconds pass, and then it opens up. So we get that. And then it works back the other way as well. Next. Now, ideally we don't want to have it working like this. We do it with JavaScript. I'm going to do, we'll do all three buttons with the hover just to speed things up and we'll cover the JavaScript at the very end. So when we're clicking instead of hovering, it doesn't make any sense to hover, but it's going to slow us down. And we'll focus more on the fun stuff for now. And then we'll add that little bit at the end, which isn't going to be too much. All right. So let's jump back into the HTML then. That's my button one. Let's shrink this down just so it doesn't get in our way. And we can focus here on my button two. And once again, we will need an SVG. And actually the SVG will be the same thing as before. So we could probably copy exactly what we had here actually for button one, collapse that back down. And so we have the, actually this will change, but we're going to have our class of hamburger, which is fine, our view box that's on here and our width, which is right there. So let's hit save. That should take up some more space on my thing. There we go. We get this coming in. So for this, instead of using the rectangle, we're going to use a line. And the line is sort of similar, but a little bit different. So basically we instead of making a rectangle that has a width and a height, we're making a line and we can add a stroke to it. So for the line, let's give it the class is equal to line like we had before. And for this one will be top. And like last time, we're going to have a lot of attributes. So we'll start, we'll sort of spread them out over multiple lines. And let's just do a 10x2 is equal to, we'll do 90 for now. I'll explain these in a second. We'll do a y1 is equal to 40 and a y2 is equal to 40. Hit save and nothing's there yet. So here, let's just bring that down here and we actually do have our line showing up on the page now or it is being drawn, but we can't see it yet. So we're going to need two more things. One's going just to be my stroke. And we're going to do, we'll do it here for now. Stroke is going to be equal to black. So we have a line. Ah, there we see it. It is showing up. And I can also control how big that is with stroke width is going to be equal to 10 to make it thicker. Now you'll notice it's a bar and it doesn't have the round edges. Now before when we did it, we used the Rx value to round things off. In this case, it's actually different and it's called a stroke line cap. And there's a few options, but we're going to go with round. But one thing you'll notice when I do this, let's just turn that one off for a second. And unlike the, this one when we did it where it rounded off what we had, the line cap, it's a cap on top of the line pretty much. So it actually makes it bigger. So if we do want it to fit here, we can change, or I mean it still fits, but I'm just going to change my values a little here. Or let's use this as an opportunity to see what this actually is, these X values. So the X one is where am I on my X axis? So if I did zero, I'm at the edge of my SVG. And so if I did 10, it's 10 pixels off. So when I hit save, it goes 10 pixels off. So if I wanted to match this, maybe we could go in with like a 15 or something just so it's in a little bit. And that would mean this is my X2. So 100 would bring it all the way out. So in this case in 85 would be sort of closer to what we originally had. I'm going to leave it just as a 90 here and a 90 here, or a 10 I should say. But if you want to change the size, that's how you sort of control how far along it is. Plus there's the round edges on the end. And we can't see that if we go to 100 or zero outside of the view box then. They're still there, but they're outside of our view box. So we don't see them. The Y values is my up and down. So we could have a line at an angle or something. But we can just do the same for both values. And it would go all the way along. And I don't actually know what would happen. No, we do need both. Okay, I wasn't sure if we needed both, but we do. So there we go. If not, I guess it defaults to zero. So that gives us one line. And then a second line. My X values can stay the same. But let's come down here and do a 60 and a 60. And that gives me my other line underneath. I did mention that we're going to have to change the fill. And here you can see I did stroke black and a stroke black. So the stroke can be on the lines. You can have individual colors for each line. Or if you don't give it on the line itself, it will use the stroke that is going or that comes from the SVG itself. It's inherited into these other elements. So it will disappear now because button color doesn't exist. But if we come in here and let's set up everything for my button two, and we'll delete that because I was like, what code is that? So let's say button, button two here. And we can say my button two dot hamburger. And on this one, we can say the color is, do we do a different color? Just to show you that they're different. I can make it white button color. We called it button color, not color. And you can see that has come through. Now I thought I set this up a little bit better, but obviously I didn't. Here we can just say that my button two, I think, there we go. Okay. I don't need to specify. And again, that is inherited in. So my button two button color is there. I don't like it white on this background color. So let's just go and do something slightly different than the other one. But there we go. So we have my second button coming in. Now we want to do something fun with this one. We're actually going to come back here for just one more thing. We're going to add to each one of these. And to be able to do this, what we're going to start with is a stroke dash array. And the stroke dash array is how the stroke is being painted basically. And we can, we can make dashes and stuff. So if I just put 10, it's going to make a whole bunch of 10 segments basically. And the whole stroke itself is nine or 80. So let's just make this like a four and it should evenly split, except we have the caps on there. So it's kind of weird. Or if we did 40, we should get two, 30, 35-ish, whatever. It doesn't matter too much. Basically what I want to do, and actually you can control things. So if I did like a 10, 20, 30, it's going to be the first one is 10. Then we have a gap of 20. Then we have the next one is 30. And then I think it repeats after that. So you can sort of control the way the dashes work. And because my whole thing is 80 across, I just want to do a stroke dash array of 80 to make sure I have like this big thing. And then it's going to be a gap of 80. So remember, if I put like 30 here, it's going to be 30, space of 30, 30, space of 30, the caps sort of throw things off a little bit. But we can do an 80. So it's going to be an 80 and then a space of 80. And then what we want to do is a stroke dash offset. And this is where it's kind of fun is you can push this around now. So if I did this at 10, it's going to move over a little bit. If I do it at 20 moves over more, I do it at 50. So it's just like we have my dash and then we're moving it and you can do negative values for this as well to move it the other way. To begin with, I don't want this to be anywhere. I want to actually keep it at zero. So we're going to take this and copy the same thing over here. So we have the same on both of them. And then what we'll do is on my button to let's say button to and line, we're going to do a transition of my stroke dash offset. And we'll do one second for now just so we can see, see it in action. If we have to play with this a little bit, we will. We are going to come back to animations for this instead of transitions, but I just want to show how this is actually working. And then so what we can do is my button to hover dot line is going to get my stroke dash offset is going to go if we did 80, just to show you what would happen, because remember we have a space of 80 to be working with is it's going to go all the way and then disappear, which we don't actually want. So we're going to go as far as we can without it disappearing, which is 79 and it's actually 79.9. And we're going to do that because if not, you get like this. It's a little bit of an oval, whereas if it's like this, you get pretty much a perfect circle because of those line caps. And so we get this. The only thing is I don't want them both going together. I actually want them to move in opposite directions. So you think you'd need to like play around, do different stuff, but you don't actually need to do that. All you need to do is here we have these setup is reverse one of them. So instead of it starting on the left and going to the right, we can actually have it go from the right and finish on the left side. So now their one line goes this way and one line goes that way. So when we hover, they go in opposite directions, even though we have the same transition that's happening on both of those. So what we want to do now is we want it to go like that. Then we actually want them to like rotate up so they can recross and turn back into an X, which is where sort of it gets a bit more fun. And the timing of all of this gets a bit more interesting. So we're going to create a not animation at keyframes. And let's call it to close icon to make it really obvious. So that does mean we can take this off from here. And I don't actually know if we need anything. So we can comment that out for now. And here instead of the line, we're going to do an animation. When we hover for now, the hover is going to, we might actually have to build the JavaScript into this one. So we'll do it at the same time for the other one, just because we're going to have to toggle a class basically. But we'll try and do it just with the animation for now. Yeah, we'll do it with the animation for now. It's fine. So to close, to close icon. And then eventually this one actually for now, we'll get the animation to open icon. So nothing's happening, but that's okay. We're going to have a 0% where we want to have it at like the default state. So we have my, it was my stroke dash array, which was a default of zero where we're beginning. If you're leaving everything at the defaults, you don't actually need a 0% here. And then this was my 79.9. So if we do that, we should get the same thing we had before. Not, let's give this a timing function on there too. And oh, that was not what I was expecting. Oh, I'm changing, I'm changing my array and not my dash offset. I do apologize. Let's fix those. That was kind of cool though, right? But now we get that we don't want it to snap at the end. So we can also do this as a forwards. So we get, there we go. And then it stops. And then we want it to be able to go reverse the other way. So let's take this and we're going to do a, to open icon. It's not really the best name, open icon, whatever, to the open state maybe. And for that basically, we can just reverse these. So I could just do that like that. The order here doesn't really matter. And we'll see that it will go both ways, except we need a timing function and forwards here as well, forwards. So now it should go that way and then come back. Now you might be saying, Kevin, can't you just do the exact same animation but run it forwards and reverse? We can't do that though. We will be switching like toggling that area expanded on and off, but if you have an animation on there and you're just switching it from forwards to reverse, it's the same animation in both times. So the way the browser sees it is the animation hasn't changed or changing the forwards or the reverse. But the animation property is the same. The name of the animation is the same. It just doesn't add that animation or do anything with that animation again. You actually need a separate animation if you're changing between two different things for it to work properly, just to show you actually to close. And then let's put reverse here. So you can see it's run. Now I get like the end state of both of them, but it won't actually run the animation. It's only switching between these two and it's not switching anything else. So if you do want to have the same animation, one forward, one backwards, you actually have to build both of them in. As far as I know anyway, that's always how I've had to do stuff. If anybody knows, I'm not a super expert in animation. So if anyone has a solution to that, leave a comment down below. But there we go. So we have that happening. Now why I like doing it with animations here is it makes it a little bit easier to sort of time things out a little bit as we're going to see. And I guess we could do it with transitions, maybe just, I don't know. We're going to do it with animations for this one. The next thing I want to do is at the 60 point, we're going to do, we actually need the stroke dash offset to stay the same. And the annoying thing with these is if they stay the same, you generally have to redecler them or to go back to the default. And now what we want to do is rotate. We're going to do 45 degrees. We'll have to fix this in a second. But it's going to rotate them. Now they get all weird and skewy with. So let's come in here and also do a, actually the transform origins are weird on this one anyway. But we're going to do that. So they rotate. Oh, it's because I have a 60%. Okay. And then at the end here, we're going to keep the rotation, but we're going to go back to having this. So it should, and then of course this should be at 100, not at 60. So they're basically, they're turning into balls. After they're turned into the two things, they're going to rotate. Once they're rotated, they grow back and become big again. Now there's a few problems. One of them is one of them has to rotate at 45 degrees. The other one has to rotate at negative 45 degrees, which seems like it should be a problem. But what we can actually do here is, we're going to come in and say, we don't need the hover on there. But I want to say that my line top, and I'm just raising, we don't need to have line top. So if you don't like the higher specificity, you don't have to, but line top just makes it a bit more clear. And so I'm going to say that the, not opacity, the rotation is going to be 45 degrees. And then my, let's duplicate that. And my line bottom is going to be a rotation of negative 45. And then what we could do is, I have these just on one line, because I like to, but we're going to do a var rotation. And the nice thing with that is, it means we can actually put in different values for the different ones, even though they're using the same animation. And now we won't really see line top, line bottom rotation that should be working. And I just spent a bunch of time trying to debug why this wasn't working. And I played around with a few little things to try and get it working. Basically, I was just really silly. And it took me a second to my dev tools to find this. I have my line top here and my line top here. So we're going to fix that and make that a bottom. And there we go. You can see they actually move in opposite ways now. And the rotation does work and go separate from one another. Yeah, that was silly of me. But there we go. We can see it's working. Now the one problem is obviously the way they're making their X is clearly not an X at all. So we do need to fix that. And I have not found a good way because if I do a transform with the top origin of center which I thought originally was going to work. I'm just going to put it on both of these. We'll notice that it doesn't quite give us the X that we need, sadly. So that's not going to work. So instead of the center center and actually based on that, see how they're both going on the bottom? I think I'm going to do a negative 45 on the first one and a 45 on the bottom one. Then they go to the top. It depends on which one you prefer. So because the center center is not working for me and I think it's because they're not based on already being in the middle of this, we sort of have to offset a little bit. And I just had to play around with this a little bit and the values I came up with were 65 pixels and 45 pixels to more or less get that first one. So it's on the right side in the right spot. And on this one, it was a 60 pixels and a 55 pixels. And I have no idea why these values seem to work. They're super magic numbery, which I really don't like. I don't like having magic numbers for stuff like that. So if you have a better solution than magic numbering that to get them to line up properly, please do let me know. But yeah, at least it works. It lines up, but obviously we need the animation to run the opposite way as well. So let's actually, I'm going to delete this one. We're going to bring this in like that. And the only thing we really need to switch is where these rotations are. So we just put the rotation up here and this rotation here can go to here. And I think now it will go in both directions. So if I have, of course, not like before to open icon for the second one. So it goes like that. And then when we come off, it does the animation in reverse. So we're doing the stroke is going down, the rotating, then they're going back out. Yeah. So I think that's a nice little fun one. And we're actually, we're going to learn something new with the third one. And after we're done that, we'll circle back and make this one do something a little extra to that I didn't show at the beginning of the video. But yeah, we'll get to this third one because this is my favorite one, even though it's kind of weird. So in button three, once again, we are going to have our SVG that has the viewport, the view box I mean of 100 and we'll throw a width on there. And so the first thing we're going to do is paste that right there and make sure we do a close SVG hit save. So we have our SVG that is there. I think the other thing I'm going to do for now is just turn off that animation for the other one so it doesn't run all the time. And we can come in here and focus on what we're going to be doing on this third one. So just like we did on the button two, we had our line coming in here. In this case, it's not actually a line that we're going to be using. We're going to be using a path and path and line are sort of similar but line, we're drawing an individual line. Whereas with path, we can do something a little bit more complex. For the path like this one, what I would encourage you to do is to actually come in and use a tool like this path builder. And this is the beginning of a little bit of what I've already set up. And basically we can move. So the first one's always moved to where you want to start. So this red dot would have been here. And so I'm starting at the 10 across and then 30 down. And it is using 100 by 100 as my system here. So it's the view box, right? 00, 100, 100. Then we're doing a horizontal line that's going 80 across. Then I'm doing an arc that's moving 20 down. So if I change this value, you can see how far down. So it's just looking at how far down we are. And then it does like a perfect arc basically. So let's say I wanted to keep this going. I had a horizontal line like let's trash that. So we're here. And then I can add another horizontal line. I went 80 across. So now I can do a negative 80 the other way. I can add a segment. We can do another arc. I want to go down by 20. And then once you're where you want, you just do that you have the RX on there. So it rounds it off. And if you need it on the other side, you just click the other side button and it sets it up for you. And it will draw a path for you. And you just go show path code and basically this is what the SVG is made up of. But I'll explain it. And if you want my version, the finished code for all of this is linked down in the description. So you can just grab it from there. So for this path, so for this all to work, we'll come in and fix the stroke color. I guess afterwards the first thing we're going to do is we're going to let's just come here and we're going to do D equals two. And as I said, I already had one off screen. So I'm going to grab the D and D means define. So define the path. And so we're moving all these numbers are sort of how we're positioning ourselves. And I get this really strange thing that shows up. And the interesting thing with paths is the fill is automatically on. And I think there's no stroke by default. So what I am going to do here is do fill is equal to none and hit save. So the fill disappears. And I do want to have a stroke on there. So we can do our stroke with my dot button three and say that the button color is purple, you won't leave that, but you can see that it is showing up. So button color is let's just make this, we'll do black for now. So it is there. We're going to come on this path. You can do this on the SVG or on the path. It's really up to you. So here we can just do stroke with is going to be equal to 10. So it's like the other ones. The other thing we want to fix, whoops. The other thing that we want to fix on this is going to be, notice how we get to like, this is the arc is nice and rounded, but when we get to here, it's really ugly. So once again, we have the stroke, line cap, not end cap, line cap, we can do is round. So that's the same as we saw on the previous one. But we also have the stroke line join. And that's where you have corners, basically, and we can say that those should also be rounded off. We're going to have to modify this a little bit and we're going to have to use with it. I think because like this could probably be moved over a little bit. And I want to show you sort of if you have something and you want to modify it a little bit. But again, we're doing a move. Then we have my horizontal line. I have an arc. So if you're needing to modify an SVG like this that you have, you can sort of follow it along. So arc would be my first arc here. Then I have another horizontal line going this way. Then I have another arc going up like that. And so this horizontal line, it probably isn't far enough along. So I could change this value and it should move that way a little bit. Perfect. Look at that. I think that's already I just wanted it sort of more centered within that space. Then I have a vertical line for V which is my vertical line here. So I could always play with that too and maybe make it taller or something. I also have another problem where the arc is going outside of the viewport which as I mentioned, here's our view box. This is a number that you can change. It's a little bit awkward if you do start playing with it. The 0, 0, 100, 100 is the easiest. But if you have something like this that's going out and you're trying to modify it and you can't quite get it to work, sometimes you just need to zoom out a little bit. And if you need to zoom out, you can just play with these numbers and make these ones a little bigger and make these ones a little bit smaller. So if we do something like this, it is zoom out on the whole thing. I think I'm going to do a negative 10 here. There we go. And it sort of keeps it centered within the space that I had. Now it looks really weird at this point. We're going to get there. It's going to look good and do some cool stuff. But basically I want a line across the top and a line across the bottom. I want an arc here and an arc here. So like the line here and the line here are going to be our two lined hamburger like we did with this one. I need to have this part here though because when we do the animation I want to see it snake around that. I want to see it snake all the way across the top and down and at one point here where these are crossing it's going to make our X. So that should be fun. I think I'm going to drop this down to a 70 again though because I'm just thinking if I go to here, here, here, and then we'll have to cut it off somewhere around there. But yeah, it sounds like it would be really awkward or hard to do but it's really not that bad. So on my button three and actually it might even be easier than the previous one to be honest. So the first thing we want to do is make it look good when we're in our regular state. So that's my button three and we're going to say my line. And if you remember we have our dash stroke array and we have a dash straight offset. I'm going to use my array to begin with. And we're starting here and if we come and look at the SVG we're going from we have a horizontal line of 60 going across. So let's just say I do a 60 here there's a really big number at the end just for now. And it's not working because I had a feeling I do need a class on here of line. We don't need top bottom left right or anything like that because we only have one. So basically what I'm saying is let's just do 60 and we'll get some weird segments whereas this is making like a giant gap at the end. So if I make this 10 you're going to see I get like a little 10 line here if I make it 100 long. And I'm just referencing to here where I know I have a horizontal line that is 60 across. So I want this to be 60. Then we have this arc and the arc is moving down by 20. The thing with arcs is they do take more space. So let's just say I did a 20 here and then we need to go 60 back the other way. So if I do that you'll notice that the 20 isn't quite long enough. So for arcs you do have to play around with it a little bit because it seems to do basically the job that we want. And then we get these two lines like that and they don't seem exactly the same. There we go. Sometimes from what I've seen these arcs you just sort of have to play with it to get them to line up properly. But now we get these two lines on top of each other and this really big number at the end again if I just if I took that off we just keep getting like all these dashes randomly along it. So by putting a really big number here at the end it's sort of saying like there's a giant gap afterwards of nothingness. So it's 60 gap of 31 60 gap of a thousand so it just pushes everything out of the way. We don't need a thousand we could do probably even like 300, 400 as long as it's not showing up basically is what I want right now. And then here we could do my button three hover before I do that. Let's also do a transition of one second. We can fix this up like usual afterwards. And what do we want? So we have a 60 here. So now I think we want to do two things. I want to push everything along to get it like I want to push this piece all the way down over to here. So I'm transitioning everything so that should be okay. So here let's do a stroke dash offset because the offset is what pushes things around and we'll try 100 and see what that does and it's sort of running in reverse now but you can sort of see how we're getting that thing coming in which I think looks pretty cool. And the offset you can actually do in a negative sense so it goes the other way around which is what I actually want to do in this situation. So you can see the 100 it's pushing it around but I'm trying to get that top line to line up on the bottom in the right space. And right now it's going a little bit too far so let's try a 90 on that and that actually looks pretty good. So that bottom one is now lining up pretty much where I want but I need that first one to keep on going and actually cross with it so that means this gap actually needs to increase so let's just try increasing that to 60 now and seeing what happens and with my mouse still hovering on I can just keep moving it around until I get roughly to what I need 110 105 maybe. I pretty much just want to get a nice little T like that. It's perfect look at that it's exactly basically where I need it to be there is one issue though is obviously it's not in the right place and we need it rotated a little bit but it's already kind of cool right and this is where it's a little bit easier we don't need any magic numbers because what we could say here is we can just sort of move the entire SVG itself at this stage so button three hover and it was my dot hamburger let's give that a outline of three pixels solid red just so we can see what's actually happening and so that's only on hover that this should show up so if I go there you can see when I do that it is coming up so I don't need that outline to actually come up what I want to do here is a translate we're just going to move it up a little bit and there's other ways you can do this we could probably even manipulate the viewbox a little bit or some other stuff but this is for me a lot easier so I basically just want to move it up so zero on the x-axis and maybe like 30 pixels negative 30 pixels this way now there is 25 20 20 we'll try 25 obviously we're overflowing outside of the button in this case so on here I am going to do an overflow of hidden and we just sort of get that going on now we don't want to jump up into place so on my hamburger here so button three hamburger button three hamburger hamburger we can do a transition of translate and then this is going to be the total time of the animation and custom properties would probably go a long way into making these also a little bit easier to manipulate I'm also going to move this down over to here keep our hamburger classes together and keep our line classes together and now you can see it sort of moves up and moves down to keep everything going the right way if you just did it like this it would definitely look a little bit weird that it's lifting up like this but what I also want to do is rotate it so here we're going to do our translate and we're also going to do a rotate and just for fun we'll do a 0.25 turn instead of using degrees because we can do that and of course that's translate and then we need to say rotate one second as well and so the whole thing rotates except that does throw things off a little bit because it is being rotated 0.125 turns not 0.25 so it actually does need to be moved down a little bit and maybe this could be a little bit smaller except this one maybe not negative positive too much there we go so now it's sort of because it's rotating and moving at the same time it's not as obvious there's some funky business going on with it so I think it looks alright and looks kind of fun by doing that you get this kind of cool little animation going on with it and I did promise we'll look at how we can actually use some of that idea to improve this one but I think what we'll do first is turn on the JavaScript and then we'll fix that one up because right now it looks kind of good but if we gave it sort of that extra spin this one has I think we could bring it over the top so jumping over to the JavaScript we'll come in here and we'll get it working refactor the CSS which shouldn't be too much we're just going to focus on this third button just JavaScript is large so I can just have this open and we can see everything so let's do a const of button 3 so we can select that button you could do like select all your buttons do a 4 each whatever you need to do but for now document dot query selector and then my button 3 oops it's button 3 with a dot at the beginning of it I was thinking like you might make your 4 each or something but you generally would have one navigation one like this so maybe you don't need that but you might have other buttons controlling other stuff anyway it depends how you're setting it up for my demo purposes here let's just come in and say that we're going to do a button 3 dot add event listener we're going to listen for a click event and if somebody clicks on it we're going to do something so we can just throw an arrow function there and what do we want to do so the first thing I want to see is the button opened or not so const we're going to say is opened is equal to my button 3 dot get attribute and we're going to look at the area expanded so area expanded is the menu that it's controlling opened or closed and again you could use the press on this as well if it's not for a navigation but right now the area expanded is false so that means that the is opened would be false so then what we would do is if is opened is equal to false you do have to look for a string here even though it's true or false just because when it's getting it from the attribute it's getting it as a string so false as a string not as a Boolean so if is opened is equal to false then I guess you could do it with two equals maybe if you put it as the Boolean but is opened is equal to false then my button 3 set attribute will be area expanded and we're setting it to true else we will set that exact same thing to false so if it's already equal to false that means it's true so we're switching them so now if I come in a inspect on that and we find here's the button area controls area expanded and if I click on it it switches to true, if I click on it again it goes to false and then if I want that to be linked to the button itself here where I have these hover states it's nice and easy to do I'm just going to select the hover control D and switch these both over to area expanded is equal to true and so now if I click on it it turns into the X because the expanded is true and if I click on it again expanded is false that means the menu is closed and it goes back to this one right here so we could set that up for all the buttons so they're not hover effects and that would be it would prevent weird stuff like this from happening to you know if somebody does it mid it should return the animation back the other way so when I was getting the demo ready to share the code I realized I made a bit of a mistake and so I took like the click JavaScript stuff and I put it for all the buttons and it works perfectly fine with one big problem on the middle button because these are using transitions there's no big deal that we're going from a default state to like a transition state this one's using an animation because it's using an animation when the page loads that animation fires so it's doing the two close right away so one way we can get around that if you are doing it is instead of using the area attribute like I used here we still want to do that but what we'd actually do is instead of looking for like this is open like that we could do a const you could still do is open but I'm going to do a const here of data state which is going to be like a custom custom attribute or data const current state I should say current state is and we'll grab you right here and this would be my data state data state so this would be required basically if you had an animation you could also probably do something that you kill any animations when the page loads and stuff but if you have other stuff going on there could be problems and what not so what I'm going to do on this button to here we're going to keep this area expanded as false we're going to add in a data state is equal to closed or sorry no we're not we're going to leave that off I should say we're not going to have a data state on there the animations only going to run if there is a data state that is being placed on there so for my button to and you could use this on all your buttons if you're worried about this type of thing from happening let's just copy this here and delete this and it's the same JavaScript we had before I just put it in a 4 each so we're applying this to every button instead of one individual one but then here would be my current state is equal to false or we could say if there's no current state so current state is no current state or the current state sorry I'm mucking this up a little bit but current state there we go is equal to false so if neither one is there we want to do two things setting that attribute we'd also be setting the current state to be if it was closed oh current state would be closed here so if it's closed we're going to make it opened and then we do the same thing here where we're setting the two different attributes and then this one becomes closed and the advantage with that then is in my CSS button two let's just go find what we needed from there instead of relying on these I could do it on my data data state is equal to open oops sorry so we'll copy that and then on the other one where my animation is so here's the other part where this animation is being called it'd be my button two data state is closed so now if the page reloads there is no closed state so this animation never fires if I click we're adding the state on I know what I did wrong I put current state here didn't I button javascript not current state data state and data state so now when I click that it's going to work and it's adding and removing that state but anytime the page refreshes there is no state there at all so the animation won't run so we're just making sure by doing it this way around that we're only bothering with the animation once the button has been clicked at least one time and before that there's no animation running but as I said we're going to fix this one up and do something a little bit more fun with it or at least I think it's a little bit more fun so what we could actually do for that is while those are happening we could actually go and take that whole SVG so here button two top bottom hover we'll do it right here my button two hover we could take the whole hamburger hamburger and do a trans just do a rotate rotate of like 0.5 turn or something like that so when it goes of course it was just kicking in so dot button dot button two dot hamburger transition rotation rotate and I don't know how long I need to transition that let's just say 1000 milliseconds for now because I was doing one second same thing so then we get like sort of more of like a spinning thing maybe you want to do instead of that you do like a full turn and then it does like this spinning thing as it's going in both directions so you get them rotating around another way you could actually play with this too is you might want to put an overflow too if you with the overflow right now but we could actually time this to have like a bit of a delay on it so just for fun let's say the delay here is going to be point or yeah we'll do a 200 millisecond delay and we'll make this 800 milliseconds so it's actually going to go 8000 I was like whoa what's happening okay that was kind of interesting so now when we go on let's maybe we make the delay 300 so it goes then it spins and comes back out you know you could play around with it and do different things with that spinning the whole thing along with the different timing and delays and other things that you could add in on top of it just to give it that extra little something to make it a bit more interesting and of course the numbers I've used on a lot of these could be a lot faster as well than what we have here and as I said earlier on the very expanded thing a little bit we could dive a lot deeper into the JavaScript actually getting the menu to open and all of that stuff I have another video looking at doing a full responsive navigation and that video is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome