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