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

Someone asked me if I could recreate the underline effect in YouTube’s tabs, and it looked pretty fun to do! I wanted to stick with using transform and scale for the underline animation as it’s better for performance, even if it meant it’s a little trickier than simply moving the left and right properties around.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:50 - What we are starting with
03:30 - Setting up the CSS
11:15 - Using JS to move the underline when we click on a tab
14:40 - Animating the underline position
15:20 - Getting the underline to match the width of the tab
17:40 - Making the underline stretch as it moves to a new position

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[NECOdes]

I really love these series of recreating small things from big websites, please make more of these.

[graealex]

<div class="wrapper"> being the bane of the existence of any web developer

[bn]

Yay, that was me! I was wondering when you were going to post this 😄 Looks great, thank you 👍

[tanush.jangid]

I don't even know how you even think of this approach when creating something like this, absolutely loved this video ❤

[IAmAdamTaylor]

Nice tutorial! I did something similar to this before but I did it by setting the indicator to width: 1px first. Then the scale can be set to the exact px value of the target tab, e.g. scale: 250 1 for a 250px tab

[Gigusx]

Immediately reminded me of the Stripe navigation, you know, the seamless horizontal transition effect that looks absolutely awesome!

[surajitdas]

Want to see more of this type where you recreate other popular things using javascript and css only.

[walidhaoud]

I enjoy this tutorial a lot, thanks Kevin

[faguolvlv]

Was a great video, was very fun to think how to make it..

Instead of scale, I calculated the right offset from the right of the tabsContainer to the right of the newTab.

Thanks for all those videos.

[kulugary]

Nice tutorial! Looks super good.

One thing that could help with the animation jittering is that, instead of trying to match setTimeouts (they're unreliable), you could probably use an This event is fired whenever the CSS Animation is completed.

[okaniyoshiii]

Amazing ! I love to see and learn Javascript in your videos ^^

[pranjalruhela]

Kevin should read this: I had a lot of trouble in life, I found a yoga channel to which I can't thank enough. Similarly I had a lot of trouble learning frontend and doing projects (basically upskilling), I can't thank you enough!

[mebamme]

Loved the video!

For compareDocumentPosition it would probably be wise to use the constant instead of the literal 4. It also looks like the value is bitwise, so instead of comparing the value you'd want to check if the 4 bit is set with a bitwise & (so, "if (newTabPosition &

And come to think of it, I'm not sure how compareDocumentPosition plays together with right-to-left pages, where a tab that's later in the document is actually further left. Maybe it would be enough to just compare the positions instead. :)

[surajitdas]

Love the vanilla javascript with css series.

[Dipenparmar]

Amazing stuff Kevin, Really appreciated work thank you!. Cheers.

[ВасилийЗорин-зв]

You're cool! Exactly what i was looking for!

[jdev]

First!

Notice me! From Philippines 🇵🇭
Btw the best way to create website is to think what’s the content first before thinking about the layout, because if you have the content you will easily know the best layout for it

[MrYonch]

hi Kevin!
I wonder, how does one suggest a new css feature? I really want whoever is developing new css features to create a feature that allows a child element to overflow from a parent that has overflow: hidden/scroll on it. sometimes you want just one child to escape. so if you could give him for example "escapeOverflow: escpae;" that would be amazing. nowdays, to achieve the same effect, I've resorted to creating a new portal and wrapping the element i want to escape with that portal. and other solutions like position: absolute are limited to a very static layout. once things get dynamic it is no longer a good solution

[pellejohansson]

Great! To make this one useful on the web, it should also be responsive. Perhaps something to make a version #2 of?;)

[CDO]

I haven't noticed this animation at all