DEV Community

Cover image for ๐Ÿš€ Day 5: Creating a Hamburger Menu with GSAP
Ashish prajapati
Ashish prajapati

Posted on

3

๐Ÿš€ 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();
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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. ๐ŸŒŸ

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

๐Ÿ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay