YoVDO

Recreating YouTube’s Tab Animation

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Javascript Courses Animation Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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 Service
University 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