How to create animated tabs with HTML, CSS, & JS

Key Takeaways

hi there my friend and friends a little while ago somebody asked me if I could recreate YouTube's navigation with this cool little like underline that sort of zooms across to the selected tab that you're on and I thought it looked like a lot of fun it's a cool little effect and it works really well so I told them I would have a video out I got it actually the rough draft built pretty quickly and said the video would be here soon and now it's been a few months and it's finally here so I do apologize for the delay but I think it's gonna be a fun video so let's move away from the actual YouTube and look what we're going to be starting with which is right here what we have so we can dive right into it but before we dive into that just in case you're new here I just want to let you know that my name is Kevin and here on my channel it's all about helping people fall in love with CSS and if I can't get you to fall in love with it I'm at least hoping to help you be a little bit less frustrated by it and today we will be diving into quite a bit of CSS and also getting into the world of JavaScript and it should be a lot of fun but as you notice I am not starting from scratch I'm starting with an existing tab system that's already working and it's I want to focus really on that underline effect that's going to be going along here so if you want to know where I'm starting from I recently did a video on accessible tabs and I've basically taken the same thing here so there should be a card popping up to that one or a link down in the description below if you want to see just on how to make like a functional tab system like we have right here the only difference I made from that original video is before when I use my arrow keys it would actually move to each tab but that's not how the YouTube one works the YouTube does it where the focus changes and then if I push enter or space bar it will actually activate it so the other one is considered automatic tabs this is manual tabs both are completely acceptable and yeah I'm just changing Focus instead of actually selecting the next one but everything else is more or less the same I also did this with just buttons straight up buttons like we can see here instead of progressively enhancing everything and that's just because they assumed that the YouTube one they're going to be using JavaScript they're not going to have a page with everything there they're going to be loading in the content as it's needed but the general breakdown is I have a whole bunch of buttons here each button has an area controls on it for a tab panel and I'm just using that for my JavaScript so I can know which tab panel when I click on one of them I should go to and then so if I click on tab panel one it knows to activate tab panel one and all my other ones are hidden so we just add and remove the hidden stuff if you want to see the starting code to know exactly with what I'm starting with including my Styles and my JavaScript the starting files and the ending files are both linked down below so you can check those out maybe pause just to get an idea of what's going on in here I'll have some extra comments in the linked code down below just to make it a bit easier to follow along but the big picture here is just we click on a tab we do a switch tab the switch tab is let's go down I'm looking at the button that we click on and it's seeing what the area controls are so that gives me the ID then I can remove my area selected from all my buttons I can add a hidden to all of the panels and then I go to the ID that I just got and remove the hidden one and then on the button that I've clicked I add the area selected if true and it also will gain Focus so really quick break down there again if you want to see sort of more of how this behavior is working I would really recommend checking out that previous video because for this one I just want to focus on the effect that we're going to be building so yeah it's also really hot here today so I might be a little bit more shiny than usual because I'm sweating a little bit as well so we're going to start with the CSS and then move into adding some additional JavaScript to actually get the functionality to work and if we look here uh the first thing is this is my tab list going here uh right so I have an area roll of tab list which is the list of tabs that I can switch between so if I come let's just actually I close I minimized YouTube a second ago but let's come and look at how YouTube actually does this where we have like this white line that's going all the way along the bottom and then we have the thicker line that's only on the one that's selected so what I'm going to do and again this is on the tab list that has all of the tabs that I can click on so in here I do have and this is what I call this um semantic CSS I didn't name that I got that idea from Myers who's expanded on it from some other people too and I'll I'll link to a video down below and there should be a card popping up as well on a video that I did that covered this idea of semantic CSS where we link into the semantics um different roles or area attributes instead of styling it with classes since this attribute has to be on there as well and if you're worried about the performance of attribute selectors please do not be um so yeah on here I think the easiest thing to do is just to come in and add a border so we're going to say a border bottom uh we'll just do one pixel solid and for now we'll just do a white just so we see there it is it has shown up um so white is probably a little bit too much so we can just change this out I like using hsl because I can do a zero zero percent and then I just choose how light I want it to be so I think maybe around like 30 would actually be pretty good um yeah that looks pretty decent so we get the underline going across I have all this just in a you know YouTube has it stretching a lot bigger than what I have but here I have mine a little bit smaller because I have it just within a wrapper but we can always make this a bigger space as well and just in case you are wondering my width of fit content did I take that off you'll see it's actually stretching the whole width of that container I sort of wanted the underline to match the content that was inside of here so I just did it like that instead um so the fit content will match the width of my content unless things wrap which actually in this case they won't wrap so I could even go with like a Max content here and it would probably would be fine as well um but yeah there we go we got my underline that is going and now we need the thicker line on top and this is where it's a little bit interesting because there's different ways we could approach this but because I need the line to be able to like stretch right oh it's annoying that it jumps up every time every time we go and it loads the new page but when when it does do that and we are having it go across it needs to be able to stretch so I don't really want this to be a child of like one of these elements if I just needed like a static underline that would be fine but what I'm going to do is let's grab this tab list and we're going to say tab list and I'll go with them after and we're going to do this with a position of absolute and because I'm using position absolute here I'm going to come on my list itself and I am going to add a position of a relative on here just so this becomes the containing block or the offset parent and then so this positioning is relative to this one and so this is due for now we'll do a left of zero or you know what yeah let's do left of zero right of zero bottom of zero and give it a height of say three pixels maybe four pixels and a background that is white so we can see it show up and it's not showing up because I forgot the content property because it is a pseudo element so we have to give it the content property for it to show up and there we go we have our line that is there and there's the fun bit because we could sort of we're going to be using JavaScript so I could calculate the left and the right of all my elements or whatever for positioning purposes but the problem then is you're animating positioning stuff we'd be doing like our left and our right or other stuff like that and I don't really like that idea so for me what actually makes more sense is using scale to shrink this down um and then that way I can we're gonna have our scale that we can animate and then once it's the right size I can just translate it into the right space and by doing that because we're looking at transforms basically uh where we can be doing all of this with more performant properties that are easier for the browser to actually animate so we shouldn't have to run into any like Jank or issues with that whereas when you're animating things like left and right or whatever it is uh you it's a little bit harder for the browser so we want to stick to generally opacity scale and Translate rotate those are the ones that are sort of like the super safe ones um there's probably a couple of others that I'm forgetting off the top of my head so what I'm going to do is I'm going to come on here and we're going to do a scale and I'm just going to use the scale property so scale like this you don't have to do it with scale you could do this as a transform but because I'm going to be doing scale and I'm going to be using my transforms I just or the translates I should say um I just feel like it's a little bit easier to break the two of them up for the animations so let's say we're going to do a scale and this is we're going to do this as my VAR and I'm going to do this as width and then comma and we'll start with a 100 just so as a default like it shows up maybe a default of zero would actually make more sense just in case there's a problem it just doesn't show up at all I'm not sure but I'm gonna go with width and I'm using this idea of the underscore here I got that from leaveru um with the idea of it just being like I'm saying this is not a global custom property it's locally scoped to where I'm using it I'm also using whip here instead of this instead of calling it scale because this is even though it's on the scale the purpose of this is going to be to control the width of it so I'm going to call it width and then the next thing we want to do here is the translate and again this is its own property browser support is pretty good um though we do want to be careful with it a little bit but we're going to do a translate here and I'm going to do my VAR left comma 0 so 0 will be the default and I'm gonna hit save and make sure nothing moves um this does take two so like let's just say I did 50 pixels here um or you can see it is it is moving over that way that's what I was hoping for I wasn't sure if um we'd need to come in so that's the idea is the left will move it that way and then the scale just for fun let's make it like one percent or something uh probably too small ten percent um you can actually see that it's over here and there's an issue with the scale um it's actually shrinking it too much so let's do left of 10. and you can see it's right there so the issue that's happening with the scale is it's scaling it in both ways and so I'm going to come here into a one and hit save and so the scale this is my scale on the X and I'm doing 10 there let's just say 0.5 so that'd be 50 or 0.1 um I think it'd be easier instead of working with percentages but we could do either one but basically the scale here will control um the actual scale of it right uh and we're only doing it on the x-axis and then the translate here we'll move it left and right and if we want to be safe we could put a zero here just to make sure so this is our X translate and that's our y translate now one other issue that we can see here by changing the scale it's actually shrinking towards the middle and that's just because the the default transition trans [Music] uh the there's too many T properties the default transform origin it's there in my list uh so we need to say it will be left so now you can see there we have a left so if we did so there we go you know we can come in with a I don't know something for that there we go it looks like it's we have it on home uh as our default starting point and then if we want to go to videos what we'd want to do is update this so we'd want to move it over maybe I don't know let's just say 100 pixels over a little bit more than that and then the scale might get adjusted a little bit too maybe this is like a 120 whatever it has to move over we're going to be using JavaScript to figure all of that out for us because it'd be a lot easier and then of course we also need it when it does this to like stretch and then come over or stretch the other way and come on over so let's this looked close enough then I'm actually going to leave these as the default um I think that looks pretty good as the default starting point so instead of having JavaScript do that we'll we'll start off in that spot because we got a little lucky there and now yeah that's it for the CSS basically we have the underline coming on there and now we need to move it around with JavaScript and calculate where things are so let's go on over here and what we're going to do you know this is all of our functionality for just making the tabs function now we want to do another you know a new functionality for making the underline move so let's do a move under a line indicator and we can do a function and call it move uh let's just move indicator just to make it a little bit shorter so let's just start like super super simply um and not do anything too fancy and say that we're going to do uh so we already actually let's just go look up here just to cover what we already have I have my tab container my buttons my panels the tab this tab list is what I'm going to be focused on since that is where all of these Tabs are so I'm going to go to that tabs container and so let's say tabs container we're going to go into the styles on here so style and then we're gonna do a set property and the property that we want to set is inside of quotations here we want to do our width I don't know let's let's start with our left and we need to figure out what it's actually going to be so we're going to say move it over by 100 and then say plus PX so how can I actually get this to work uh move indicator so now let's come here and then we're going to say when we switch tabs all of this is happening and we're going to also go to or we're going to do a move indicator and so if I click here it should move over and it doesn't look like it's working so let's go look in my Dev tools and just come up I see we I saw we didn't have an error and here I see that it actually put the left 100 pixels oh I don't have an underscore of left there uh hopefully you noticed that when I when I when I was doing it so let's refresh now uh so if I click here it jumps on over decent start not exactly what we need but at least it's a decent start um so instead of doing that let's sort of Step things up a little bit and we already have the tab that's being clicked on sort of running through all of this so we can pass that new tab into here so let's just say uh new tab and hit save now we also need the old tab so we will just put in um we'll write for now actually yeah we'll rate old tab old tab new tab um just because I need two things being passed in so the new tab actually lines up with this one just because if I only did this my new tab would be it would think my new tab is my old tab here or you know what let's just take off old tab for now we'll bring it back in after it'll make a lot more sense uh so we're passing new tab into here and then we're gonna get that over here to replace this 100 and that's easy to do we need to say new tab dot offset left and so the offset left is just the distance the left it is basically so if I hit save and I click on shorts It lines up with shorts if I click on community It lines up with Community uh now it doesn't line up on the other side we're going to figure out the scaling and all of that fun stuff after but at least it moves into the right position so that's already like you know a good thing that was a nice easy one uh a nice easy win right there so whenever I'm doing this type of thing and you're trying to break things down always go with the easy wins first things that okay I can move it over then now is the harder part of course I'm saying that's the the harder part let's do the easier part again let's go for another easy win I'm just making sure it like slides into place uh so what we'll do is let's come here we already have this let's come here and do a transition as well so let's do about 200 milliseconds um we could just do this so it's doing everything but we might as well say that we're doing our scale comma and we can also do our translate translate over 200 milliseconds as well so now it's same as what we just had but we're being a bit more explicit uh we'll probably want to come in with some timing functions on these but let's wait until we have more of the functionality there and then we can make it look a little bit nicer as things are stretching and all of that now to be able to get the width that we actually want it to be I think is the next sort of logical step and so to be able to do that we're still focused on this new tab that's right here and we want to figure out how big it is but because I'm using scale and the original scale is like the full length of this we basically need it to be a percentage of that full width so let's figure out what that's going to be so let's come here and we're just going to create a new variable because it'll be a little bit easier I'm here just doing an offset left I think is fine but for we're going to have to have a little bit of a little bit longer I like making a variable then so let's do new tab width is going to be equal to our new tab offset width but we need more than that and if it was just my offset width we'd be fine but again we don't want the actual width we want to base it on the percentage because we're using scale and I'm using scale instead of animating width just because it's better for animation performance and it's not that much more complicated to do so we have that and then we want to divide it by we want the whole width of the parent that it's inside of so there's a few different ways we could do that but we already have the parent right here as my tabs container so we can just do the exact same thing but instead of on the new tab we do this on the tab container so let's hit save on that and then what we can say here is that our let's duplicate this line that's right here where we're setting uh the style property and we're going to set the width property and this one will be and actually we don't need the pixels in this one we're just going to say that it's my new tab width so let's hit save jump on over to the browser and take a look and see and it's not working so let's go and take an inspect at that and take a look um when I let's just click nothing's happening tab container I think I called it tabs container and so here tabs container this one there we go tabs container we can fix that now if we come there we go and it's going to always match the right size and so it's kind of hard to tell but you saw how off it was before when I was doing this and like on the community it was like cutting in the middle so now it's always matching and we can stop there like already that's kind of fun uh right I think that's pretty neat I could just click around and like watch that Zoom around uh and I quite enjoy that but we want to match that YouTube Behavior a little bit more closely so let's go take a look at it as a reminder I guess we'll move this up a little bit so we can actually see it in action and you can see it just sort of like grows all the way across then we do that and it's going to stretch and then once it's done stretching it sort of seems to like fall into place so it's kind of fun it's kind of awkward the way the page kind of reloads as it's moving sometimes so it gets a little bit janky and I don't even know how they're doing this I just we could look at the dev tools to figure that out but they have a lot more going on here so I'm just doing it my own way uh but yeah it's looking good there so let's let's see how we can figure out that behavior of getting it to stretch and everything so to be able to do that we do need to get the positioning of the new and the old tab like I mentioned so we're going to pass through the old tab here as well and we'll put old old tab here and so what I'm going to do is we need to get what the old tab was what's the one we're actually clicking on because when I was doing it previously I only needed to know the new one that it was going to we never had to worry about the old one before there's a few different ways that we could do this I could get the event and probably get the event Target or something like that but whenever when I first do something before we go through all of this other stuff and anything I have like here we're turning our area selected to false but before anything gets set to false the one that currently has area selected on it is the active tab so again you could find another way to do this but I'm just going to say that const current tab is going to be equal to my tabs container and then we just do a query selector and we want to get in here our selector is going to be our area selected is equal to true just like that so that's our I'm saying current tab it makes this is our old tab the original tab before we clicked on a new tab so the old tab was the one that was area selected is true we eventually remove that so actually because I'm adding this in we could just set this for the old tab only so if you want to clean things up that would be an option right there but what we're going to do is then we have the old tab there that's passing into here and to me or one of the important thing and the reason we need this is because we need to calculate the a the distance between them but also is it to the left or to the right because that's really important for the way the animation is going to work so let's do that one first so let's say const new tab position is going to be equal to my old old Tab and then we have the compare document position which is a really interesting uh or I found it interesting how this works and let's say new tab because it returns a number and it's either a 2 or a four so let's go and take a look at how this is going to work by console logging it first console log new tab position let's come in here and take a look and we have this docked on the bottom now I switched that in between just to make it a little bit easier and so now if I click there it's four and it's four and it's four and so as long as the new tab is to the right the number will be a four if my new tab is to the left the number will be A2 so anytime I go to the left it's a two anytime I go to the right it's a 4. cool so that just makes life a lot easier we're either getting a two or four we know which direction we are going in now the other thing that is kind of interesting here is I'm not going to grab something we're not going to make um a variable right now for the size that we need because it is going to change a little bit depending on the direction we're moving it that might sound weird but I'll explain it once we get to that but just to have something that's around let's do we're going to do a let and we'll say transition with just so we have it exists and then we can apply it where we actually need it but this number as I said the width during the transition will change depending on where the um you know based on this tab position is it moving to the left or moving to the right so let's start if we're moving to the right and if you remember if we move to the right it is the number four so let's come here I'm going to say if new tab position is equal to four so that means if it's to the right we want to do something so we can even put here if the new tab is to the right what do we want to do and this is where we're going to set our transition width so transition width is going to be equal to so what we're going to do is we want to figure out like we we currently have this and we basically want to get from here to here and then also add the width of this button to it so we want to get the distance between the two of them and then include the width of this one so we're going to start by saying where like how far over should we move it so that would be my new tab dot offset left right so uh that's that would just be that's the distance from this Edge over to where roughly where my cursor is right now to the left side of this one so we want that offset width but then we also want to add into that the size of it as well so new tab Dot and then it would be the offset width so that means when we're going to here we're getting the distance from here to the left then we're adding the space of the button to it so let's leave it like this for a second and actually apply this so here we're already setting all of these uh or you know what I'm gonna for now I'm going to comment this one out and we're going to come in where we have to do a little bit of stuff to like get it to that final value but let's come here and just do this as my transition with for now transition width now this isn't going to work perfectly yet uh because it'll work but it's going to get way too big and that's because this needs to be a percentage if you remember when we originally set that up we had this right here so we're actually going to steal the same thing because we want it to be a percentage of the size of the total container so we're setting the property of width to transition width divided by the overall size and now it's sort of going to work but there's going to be a little bit of a problem so if I click here ah see it is it is working and if we go back now it's you know things sort of sort of work but it's kind of weird and it's a little mucked up but at least it's sort of working um the problem now though is we need to get let's just refresh that so if I click on shorts what's happening is we're getting and let's refresh that again so if I'm on home and I click on playlist it's going and it's moving the left to the left side but it's taking that entire size into account and so it's it's way too big than what we actually want it to be and that's just because it also depends on where it started from because remember this is only our transition width it's not the the overall width of what we want but it basically when we do this like if I'm on home and I click on playlists uh you know what we're going to do actually just we're going to turn off this left one as well it's going to highlight better what's happening if I click on short Parts you can see there it's going from home and actually this one looks like it's working because it's ending at shorts this is perfect exactly what we want if I'm on shorts and I go to community now though well now it's going all the way over let's go to Here and Now for some reason it got even bigger this is where the direction does matter um so from home to here it looks good but then as soon as right we need to like subtract where it was starting from well that's easy because we can subtract where it was starting from by saying old tab dot offset left because that's where it was originally starting from so the first one always was working but now when I was going from shorts to community it would just stay here and stretch even further now it's not stretching even further it's still staying on the left because I'm not moving that one currently but what it's doing is it's looking at let's refresh again so from home to videos it's looking at the distance from this button to this one and it's taking both of them now if I click on shorts you see it doesn't really get much bigger because it's only looking at the distance from videos to Short so now it's actually working much much better and we can actually add that offset left back in so when I click here it works and then when I click here it gets a little bit bigger now you'd think we could just come in here and add this offset left to it now but the problem is when I do that it moves so it's stretching and moving at the same time basically we need it to stretch and then we needed to stretch to here and then sort of shrink down to there to find get to its final point so this left that we have here I'm going to cut it out so this one I'm going to leave this here we're just going to leave it at just like that what we're going to do is then come down and we're going to use a set timeout so in the set timeout we're going to do a function so nothing too fancy but we're just gonna be waiting for a little while and I'm going to drop that the the move left into here and we're also going to take this one and bring it into here as well and so basically we're going to stretch out and then after a certain amount of time it's going to shrink down to what the original values should have been when we calculated those so how long should it take well it should take about 200 milliseconds because that's how long our transition was so let's go take a look and if I click on shorts it works so we're stretching here to this width so we we know it's going from there stretching out and then after it's stretched out it's finished stretching after 200 milliseconds and then after that's done we're going to reset the left to the new tab offset now what we have is back to that original Behavior where it's matching the size that we wanted it to be but you'll notice when I go this way it really bugs out and that's where the reason it's bugging out is because it's now following we were going from the home to the playlist and it works fine you'll notice that little bounce at the end too we'll we'll just we'll fix that after but when I go this way it's stretching that way because that's what we told it to do we wanted it to stretch that way so it's still stretching that way and then it's flying into place so that's where I said the transition width is actually going to have to be calculated differently depending on the tap positioning and actually the the timeout here uh we're gonna set one of these properties also right away so let's come here I'm going to say else so if it's to the right we do this and then else would be like if the tab is to the left then we're going to say that the transition width is going to be equal to and this time what we want to do is if let's say we're on playlists here we have this already in place so we want to keep this exact thing but then add the distance all the way over to let's say home or all the way over to video so this should stay the same so let's start with that we can say the old tab offset uh left plus the old tab offset whip and this isn't perfect but it's very similar to what we did here at the sort of like the other way around so when I click here it's going to go there it's not ready yet but you can see it's at least it's not like getting gigantic like it was before uh so we have the that one and then we can just hear it then say minus the new tab new tab and we want it all the way on the left side of the new tab so we can say offset left so by doing that now it's still not going to be perfect but the size of it will actually be better so if I click there um you'll notice like the size of the transition is actually the size that we need it to be the problem is we actually need this one to start moving right away we need that left to be part of what's Happening from the very beginning so I'm just going to copy this here and paste it here and hit save and now so if I came here and I go to shorts it's going to go that way if I go to home it's going to go that way and so when we're going to the right we're delaying the movement of the left property we're saying because we want to keep right we want to we want the left to stay in the left position we want it to stretch out and then once the animation is done we want it to shrink when we're going the other way we we've calculated all of the positioning so we want all of the different things we want it to stretch out but when it stretches we need it to stretch back to where it was so we need that left property to change right away and so we have that going on now where it's stretching right away and you'll notice that one thing where every now and then it gets that little extra jiggle and I can't reproduce it every time but we get a little bounce that happens sometimes and the way I've found to solve it is just to put the set time out to be slightly longer than what your animation is maybe there's a better way of doing this but by doing that I found that it works really really well and I never run into any issues it just ensures that the animation is completely finished before we apply those last few properties and it prevents any issues from happening uh one thing that's definitely here is like I'm repeating this here I found it easier to do that than having a set timeout here and a set timeout here and then having right like I'd be repeating myself that way so I just thought it was an easier one and it doesn't it it's this and then we're setting it to the same value if we're moving to the left but if you prefer not repeating that you could definitely have a set timeout here that includes both of them and a set timeout inside of this that only has one uh it's completely up to you which one you'd prefer but with that we we've done it we're here we've got it all working if you didn't see that original video where I just looked at the basic tab functionality you can definitely check it out it is right here for your viewing pleasure and with that I'd really like to thank my enablers of awesome who are TT lld Bailey Andrew James and Rico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome