GSAP Menu Animation

How To
#1

Hey there!

I’m trying to recreate a GSAP menu animation I’m already using on a Webflow website with Bricksforge.

Here’s the code :

<!-- GSAP Animation -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const menu = document.querySelector(".full-page-menu");
  const overlay = document.querySelector(".menu-overlay");
  const links = document.querySelectorAll(".menu-link_text");
  const trigger = document.querySelector("#menu-trigger");
  let menuOpen = false;

  // Initial state for menu and links
  gsap.set(overlay, { y: "-100%" });
  gsap.set(links, { y: "175%" });  // Removed rotation

  trigger.addEventListener("click", function (event) {
    event.stopPropagation();

    if (menuOpen) {
      // Timeline to hide the menu
      let hideTimeline = gsap.timeline({
        onStart: function () {
          menu.style.display = "flex";
        },
        onComplete: function () {
          menu.style.display = "none";
        }
      });

      // Making both animations run in parallel with a delay for the overlay
      hideTimeline
        .add(
          gsap.to(links, {
            y: "175%",
            stagger: { each: 0.1, from: "end" },
            duration: 0.5,
            ease: "power2.inOut"
          })
        )
        .add(
          gsap.to(overlay, {
            y: "-100%",
            duration: 1.2,
            ease: "power2.inOut",
            delay: 0.15
          }),
          0
        );
    } else {
      menu.style.display = "flex";
      // Timeline to show the menu
      let showTimeline = gsap.timeline();

      showTimeline
        .to(overlay, { y: "0%", duration: 1.2, ease: "power2.inOut" })
        .to(
          links,
          {
            y: "0%",
            stagger: 0.1,
            duration: 0.5,
            ease: "power2.inOut",
            delay: 0.1
          },
          "-=0.9"
        );
    }

    menuOpen = !menuOpen;
  });
});
</script>

Is it possible to make it with the Bricksforge Panel directly or in the Bricks custom code?

Thanks in advance