Kinetic
mega menu.

// Mechanisme: nav-mega-menu-reveal-kinetic
import gsap from 'https://esm.sh/gsap@3.12.5';
const trigger = document.querySelector('[data-menu-trigger]');
const panel = document.querySelector('[data-menu-panel]');
let open = false;
trigger.addEventListener('click', () => {
  open = !open;
  if (open) {
    gsap.to(panel, { autoAlpha: 1, y: 0, duration: 0.4, ease: 'power4.out' });
    gsap.from(panel.querySelectorAll('[data-animate]'), { y: 20, autoAlpha: 0, stagger: 0.04, duration: 0.3, ease: 'power4.out', delay: 0.1 });
  } else {
    gsap.to(panel, { autoAlpha: 0, y: -10, duration: 0.2, ease: 'power4.in' });
  }
});

<!-- Skeleton: nav-mega-menu-reveal-kinetic -->
<nav>
  <button data-menu-trigger>Menu</button>
  <div data-menu-panel>
    <a data-animate href="#">Link 1</a>
  </div>
</nav>

/* Styling: nav-mega-menu-reveal-kinetic */
[data-menu-panel] { position: fixed; inset: 0; background: #0A0A0A; display: grid; place-items: center; opacity: 0; pointer-events: none; }