Recreating YouTube’s Tab Animation

Recreating YouTube’s Tab Animation

Kevin Powell via YouTube Direct link

- Making the underline stretch as it moves to a new position

7 of 7
Previous

7 of 7

- Making the underline stretch as it moves to a new position

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Recreating YouTube’s Tab Animation

Automatically move to the next video in the Classroom when playback concludes
  1. 1 - Introduction
  2. 2 - What we are starting with
  3. 3 - Setting up the CSS
  4. 4 - Using JS to move the underline when we click on a tab
  5. 5 - Animating the underline position
  6. 6 - Getting the underline to match the width of the tab
  7. 7 - Making the underline stretch as it moves to a new position

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.