Recreating YouTube’s Tab Animation
Offered By: Kevin Powell via YouTube
Course Description
Overview
Learn how to recreate YouTube's tab animation in this 31-minute tutorial video by Kevin Powell. Explore techniques for creating an underline effect using transform and scale properties for better performance. Follow along as the instructor guides you through setting up CSS, implementing JavaScript to move the underline on tab clicks, animating underline position, matching underline width to tab width, and creating a stretching effect during transitions. Gain insights into semantic CSS and tab functionality while improving your web development skills.
Syllabus
- Introduction
- What we are starting with
- Setting up the CSS
- Using JS to move the underline when we click on a tab
- Animating the underline position
- Getting the underline to match the width of the tab
- Making the underline stretch as it moves to a new position
Taught by
Kevin Powell
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX