Svelte + GSAP megamenu tutorial + code

Imagine we're going to build a super cool magic menu that appears and disappears like a hidden treasure! Let's explore how we make this happen, step by step.

What We Need

• HTML (our menu's skeleton)
• CSS (our menu's pretty clothes)
• JavaScript (our menu's magical spell book)
• GSAP (our animation wizard)

Part 1: The Menu's Shape 🏗️

In our HTML, we have special parts:

• A big title that says "Full Screen Overlay Menu"
• A special button that looks like a hamburger (those three little lines)
• A hidden menu waiting to spring to life

The Hamburger Button

<div id="toggle-btn" class="btn">
  <!-- These are the magic lines that change when you click -->
  <div id="hamburger">
    <span class="line line-1"></span>
    <span class="line line-2"></span>
  </div>
</div>

Think of this like a magic switch. When you click it, something amazing happens!

Part 2: Making It Look Pretty 🎨

Our CSS is like the menu's fancy outfit. We use special colors and shapes to make everything look cool.

Super Cool Button Tricks

#hamburger .line {
  background: black;  /* The color of our magic lines */
  transition: transform 0.25s;  /* How smoothly they move */
}

/* When the button is active, the lines create an "X" */
#hamburger.active .line-1 {
  transform: rotate(45deg);
}
#hamburger.active .line-2 {
  transform: rotate(-45deg);
}

It's like the lines do a little dance when you click!

Part 3: The Magic Spell (JavaScript with GSAP) ✨

Now for the real magic! We use GSAP to make our menu smoothly appear and disappear.

The Magical Timeline

const tl = gsap.timeline({
  paused: true  // Our magic is ready but not running yet
});

function revealMenuItems() {
  // This is where the magic happens!
  tl.to(".menu-item>a", {
    top: 0,  // Bring menu items up from below
    ease: "power3.in",  // Smooth, bouncy movement
    stagger: {
      amount: 0.5  // Each item appears one after another
    }
  });
}

Imagine each menu item is a shy little friend. When you click, they slowly peek out, one by one!

How It All Works Together 🤝

1. You click the hamburger button
2. The lines transform into an "X"
3. A smooth wave of color appears
4. Menu items slide into view
5. Click again, and everything goes back to hiding!

Pro Tips for Young Wizards 🧙‍♂️

• Always include the GSAP library
• Use timeline() for complex animations
• stagger makes things appear super smoothly
• ease controls how bouncy or smooth your animation feels

Fun Challenge 🚀

Try changing these things:

• Make the menu items a different color
• Change how fast they appear
• Add fun hover effects!

Happy coding, little web wizard! 🌈👩‍💻👨‍💻