I try implement this code on Vanilla JS but something doesn't work out, although this is the same code, for example in the example from codepen which I attached in url this displayed all rows smoothly and my side this displayed only first row smoothly and other rows this like static rows . I'm using shadow DOM. On my side just differ javascript code for example, I using an object instead of a string.
Thank you in advance!
tl.fromTo(menuIcon, { rotation: 0 }, { rotation: 180 }, 0)
<header>
<h1>GSAP Rocks!</h1>
<div class="menu-icon"></div>
<ul class="menu">
<li class="menu-item">Home</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
<li class="menu-item">Rock on GSAP</li>
</ul>
</header>
import { gsap } from "gsap";
export class Header extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
fetch("../CORE/Header/header.html").
then(response => response.text()).then(content => {
this.shadowRoot.innerHTML = content;
this.createMenu(this.shadowRoot);
});
}
createMenu(shadowRoot) {
const menuIcon = shadowRoot.querySelector(".menu-icon");
const menu = shadowRoot.querySelector(".menu");
const menuItem = shadowRoot.querySelector(".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: "power1.inOut" }
});
tl.fromTo(menuIcon, { rotation: 0 }, { rotation: 180 }, 0)
.fromTo(
menu,
{ clipPath: menuUp, visibility: "hidden" },
{ clipPath: menuDown, visibility: "visible" },
0
)
.fromTo(
menuItem,
{ opacity: 0, y: "0.5em", stagger: 0.1 },
{ opacity: 1, y: "0em", stagger: 0.1 }
);
menuIcon.addEventListener("click", () => {
if (!menuOpen) {
tl.play();
menuOpen = true;
} else {
tl.reverse();
menuOpen = false;
}
});
}
}
