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
✅ Starting code: https://codepen.io/kevinpowell/pen/ab...
✅ Finished code: https://codepen.io/kevinpowell/pen/vY...
✅ My first tabs video:    • Create Accessible Tabs with HTML, CSS...  
✅ Semantic CSS:    • How to write Semantic CSS  

⌚ 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
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

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.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

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