Gsap Animation not starting until clicked?

[onthegocode]

Hello,

 

I am working on a wordpress website and incorporated Gsap to create a nice animation but all of a sudden the Gsap animation doesn't work until the user clicks on the screen. This seems to be for both Mobile and Desktop. I was wondering why this may be happening and how I can fix the issue.

 

Website: lisapalmer.me ]

 

My JS Code: 

 

let tl = gsap.timeline({ defaults: { ease: "sine.ease" } }),
    current = window.location.pathname,
    mediaQuery = window.matchMedia("(max-width: 921px)");
mediaQuery.matches
    ? tl
            .from(".text", { duration: 1, y: -150, delay: 0.25, stagger: 0.1 })
            .fromTo(
                ".astra-logo-svg",
                { duration: 1, opacity: 0 },
                { duration: 1, delay: 0.8, opacity: 1 },
                "<"
            )
            .from("#heading_wave", { duration: 1.5, opacity: 0 }, "<.6")
            .to(".header-hide", { duration: 1, opacity: 1, stagger: 0.2 }, "<")
    : "/" == current
    ? tl
            .from(".text", { duration: 1, y: -150, delay: 0.25, stagger: 0.1 })
            .fromTo(
                ".menu-link",
                { y: 25 },
                { duration: 1, y: 0, opacity: 1, stagger: 0.2 }
            )
            .fromTo(
                ".astra-logo-svg",
                { duration: 1, opacity: 0 },
                { duration: 1, delay: 0.8, opacity: 1 },
                "<"
            )
            .from("#heading_wave", { duration: 1.5, opacity: 0 }, "<.6")
            .to(".header-hide", { duration: 1, opacity: 1, stagger: 0.2 }, "<")
    : tl
            .to(".menu-link", { duration: 1, y: 0, opacity: 1, stagger: 0.2 })
            .fromTo(
                ".astra-logo-svg",
                { duration: 1, opacity: 0 },
                { duration: 1, opacity: 1 },
                "<.9"
            );
 

 

Thanks,

 

Andrew Rivera

[mvaneijgen]

Seems to have nothing to do with GSAP. If I load your site in Chrome and open the network panel none of you're JS gets loaded, as soon as the user interacts with their mouse on the page (moving the mouse, scrolling, clicking) all the Javascript files get injected in to the site at once.

 

So I would start disabling plugins or contacting the theme developer of Astra.

[Cassie]

Also a little note as I see you're using window.matchMedia.

In the latest version of GSAP we have a matchMedia option 🥳

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

[onthegocode]

10 hours ago, mvaneijgen said:

Thank you, you are right it has nothing to do with Gsap I had a feeling because gsap is great! Thank you I will look into how to solve it.