Vanila JS not correct display dropdown list or GSAP not correct working with Vanilla JS

[Ferrari]

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;
            }
        });
    }
}

 

See the Pen YzpNmzr by BrianCross (@BrianCross) on CodePen

[Cassie]

Hi there, could you add a minimal demo showing the broken example? Thanks

[Ferrari]

this doesn't help to you because code have shadow DOM and I get elements from shadowRoot

See the Pen Jjeegqz by yhgzmagx-the-flexboxer (@yhgzmagx-the-flexboxer) on CodePen

[GSAP Helper]

Are you saying it's impossible to reproduce the problem in CodePen or Stackblitz? I'm having a hard time understanding what you're asking here or what you think the problem is. If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the problem and we'd be happy to take a look at any GSAP-specific questions. 

[Ferrari]

I get this result 

See the Pen vYQvyvg by yhgzmagx-the-flexboxer (@yhgzmagx-the-flexboxer) on CodePen

and I expected expected

[Cassie]

Hey again,

I'm afraid I've only got very limited understanding of shadow root - basically just the contents of this thread!
 

I'll happily take a look and do some googling if you can provide a clear example of the issue, but I'm going to need a demo that actually shows the 'broken' behaviour.

Maybe someone else can jump in with less context, but I definitely need a little more. Your efforts are appreciated. Thanks.

[Ferrari]

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;
            }
        });
    }

 

[Rodrigo]

Honestly I couldn't tell you, as Cassie pointed out this most likely is related to the shadow root, your example in codepen with regular HTML/CSS/JS works in the way it should.

 

But is great that you got it sorted out! 🥳

 

Happy Tweening!