DEV Community

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

Posted on

3 1

πŸš€ 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. 🌟

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay