🚀 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 here!

🌐 GitHub Repository

Find the source code on GitHub.

🚧 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. 🌟