YoVDO

Animated Hamburger Icons - Basic, Intermediate, and Pro

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Javascript Courses Web Design Courses User Interface Design Courses SVG Animation Courses

Course Description

Overview

Learn how to create basic, intermediate, and advanced animated hamburger icons using SVG in this comprehensive tutorial. Explore the unique possibilities SVG offers for creating engaging hamburger menus. Start by setting up the initial button and creating the first SVG, then progress through general styling techniques for all buttons. Master the art of styling and animating three distinct hamburger icons, each with increasing complexity. Dive into JavaScript implementation to bring the animations to life, and discover how to enhance the second animation for added visual interest. Gain hands-on experience with SVG path building and CSS animations while following along with provided code examples and resources.

Syllabus

- Introduction
- What we’re starting with and setting up the first button
- Creating the first SVG
- General styling for all our buttons
- Styling and animating the first button
- Creating the second SVG
- Styling and animating the second button
- Creating the third SVG
- Styling and animating the third button
- Writing the JavaScript
- Making the second animation more interesting


Taught by

Kevin Powell

Related Courses

Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
iDESWEB, Introducción al desarrollo web
Miríadax
Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity
Web Application Architectures
University of New Mexico via Coursera