Jump to content
Search Community

Gsap Animation not starting until clicked?

onthegocode test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...