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

From the creator

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/abQEBMb ✅ Finished code: https://codepen.io/kevinpowell/pen/vYQVGgm ✅ My first tabs video: https://youtu.be/fI9VM5zzpu8 ✅ Semantic CSS: https://youtu.be/lWu5zf_S9R4 ⌚ 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 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/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 a

Published 2023-07-28 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.