Ferrari's post in Vanila JS not correct display dropdown list or GSAP not correct working with Vanilla JS was marked as the answer
Ok now it's work fine, but why the code is different, how such may be?
const menuIcon = shadowRoot.querySelector(".menu-icon");
const menu = shadowRoot.querySelector(".menu");
const menuItems = shadowRoot.querySelectorAll(".menu-item");
const menuUp = "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)";
const menuDown = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)";
let menuOpen = false;
const tl = gsap.timeline({
paused: true,
defaults: { duration: 0.3, ease: "power2.inOut" },
});
tl.fromTo(menuIcon, { rotation: 0 }, { rotation: 180 }, 0)
.fromTo(
menu,
{ clipPath: menuUp, visibility: "hidden" },
{ clipPath: menuDown, visibility: "visible" },
0
);
const staggerTl = gsap.timeline({ paused: true });
staggerTl.fromTo(
menuItems,
{ opacity: 0, y: "0.5em" },
{ opacity: 1, y: "0em", duration: 0.2, stagger: 0.3 }
);
menuIcon.addEventListener("click", () => {
if (!menuOpen) {
tl.play();
staggerTl.play();
menuOpen = true;
} else {
tl.reverse();
staggerTl.reverse();
menuOpen = false;
}
});
}
