🚀 Day 5: Creating a Hamburger Menu with GSAP

Today, I explored how to create an interactive hamburger menu using GSAP (GreenSock Animation Platform). Hamburger menus are a staple in web design, especially for responsive layouts, and adding animation takes them to the next level!

Let’s dive into what I learned and built. 🎉

✨ Project Overview

This project focuses on a menu that slides in from the right when the hamburger icon is clicked and slides back out when the close button is clicked. Using GSAP's timeline, I achieved smooth animations with intuitive controls.

🖥️ Code Breakdown

Here’s the magic behind the scenes:

JavaScript (Animation Logic)

var menu = document.querySelector("#nav i");

var close = document.querySelector("#full i");

var tl = gsap.timeline();



// Slide-in animation for the menu

tl.to("#full", {

    right: 0,

    duration: 0.5,

});



// Animate the menu items

tl.from("#full h4", {

    x: 100,

    duration: 0.5,

    opacity: 0,

    stagger: 0.25,

});



// Animate the close icon

tl.from("#full i", {

    opacity: 0,

    stagger: 0.5,

});



// Pause the timeline initially

tl.pause();



// Play animation on menu icon click

menu.addEventListener("click", function () {

    tl.play();

});



// Reverse animation on close icon click

close.addEventListener("click", function () {

    tl.reverse();

});

HTML Structure

The HTML defines a simple layout for the main content, the hamburger menu, and the sliding menu:

<div id="main">

    <div id="nav">

        <h2 class="poppins-semibold">Ashish</h2>

        <i class="ri-menu-line"></i>

    </div>

    <div id="full">

        <h4 class="poppins-medium">Home</h4>

        <h4 class="poppins-medium">About</h4>

        <h4 class="poppins-medium">Music</h4>

        <h4 class="poppins-medium">Playlist</h4>

        <h4 class="poppins-medium">Liked</h4>

        <i class="ri-close-line"></i>

    </div>

    <section class="main_sec">

        <h1 class="poppins-semibold song_title">Songs That You Like</h1>

        <p class="poppins-regular">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

        <div class="button_container">

            <button class="btn btn-1">Listen</button>

            <button class="btn btn-2">Read More</button>

        </div>

    </section>

</div>

CSS for Styling

The CSS sets the stage for the animation with a modern and clean design. The menu starts off-screen and smoothly slides in.

🌟 Features and Effects

1. 
   

   Smooth Slide-in Menu

   
   
   
   
   
   • The menu slides in from the right with a duration of 0.5s.
     
   
   
   
   


2. 
   

   Staggered Menu Items

   
   
   
   
   
   • Each menu item appears one after another with a 0.25s delay for an elegant effect.
     
   
   
   
   


3. 
   

   Reverse Animation

   
   
   
   
   
   • Clicking the close button reverses the animation, making it seamless and interactive.
     
   
   
   
   


4. 
   

   GSAP Timeline Control

   
   
   
   
   
   • Using GSAP's timeline, we controlled the order and timing of the animations efficiently.
     
   
   
   
   

🎥 Live Demo

Check out the live demo .

🚧 Challenges Faced

1. 
   Menu Positioning: Ensuring the menu starts off-screen without affecting other elements.
   


2. 
   GSAP Timeline Management: Managing multiple animations in a single timeline required some trial and error.
   

🚀 What can improve

• Adding hover animations for menu items.
  


• Enhancing accessibility by implementing keyboard navigation support.
  


• Exploring advanced GSAP plugins like ScrollTrigger for scroll-based interactions.
  

Creating this hamburger menu was both fun and enlightening! Let me know what you think, and stay tuned for more GSAP adventures. 🌟