Scrolltrigger Only Working Properly When Logged into Wordpress

[neontrenton 3 Likes (Newbie)]

Hello.

 

I have the following working properly in a hardcoded Wordpress template, however, it seems that whenever I view the site and I'm not logged in, the Scrolltrigger events do not work/fire.

 

I've replicated the site in Codepen but cannot replicate the issues there: 

 

Does anyone have any idea why this might be happening? It seems like a Wordpress-specific issue (I have no cache/cache plugins on the site) but I don't even know where to begin troubleshooting this.

 

Here are the scripts I'm loading into the site:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

<script src="/wp-content/themes/canvas/js/plugins/ScrollTrigger.min.js"></script>

 

Here is an example of a ScrollTrigger event that DOES work:

gsap.utils.toArray(".color-reveal").forEach((color) => {

    gsap.to(".color-reveal", {
        scrollTrigger: {
            trigger: color,
            toggleClass: "active",
            scrub: true,
            start: "top center",
            end: "+=100",
        },
    });
});

 

Here is the specific ScrollTrigger events that DO NOT work if you aren't logged in:

let containers = gsap.utils.toArray(".treatment-1");

containers.forEach((container) => {
    let tl = gsap.timeline({
        scrollTrigger: {
        trigger: container,
        scrub: true,
        pin: true,
        start: "center center",
        end: "bottom top",
        markers: false,
        },
        defaults: { ease: "none" }
    });
    tl.to(container.querySelector("img"), { scale: 1, x: -500 });
    tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 });
});	

// Treatment Two Animation
let containerstwo = gsap.utils.toArray(".treatment-2");

containerstwo.forEach((container) => {
    let tl = gsap.timeline({
        scrollTrigger: {
        trigger: container,
        scrub: true,
        pin: true,
        start: "center center",
        end: "bottom top",
        markers: false,
        },
        defaults: { ease: "none" }
    });
    tl.to(container.querySelector("img"), { scale: 1, x: 450 });
    tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 });
});

// Treatment Three Animation
let containersthree = gsap.utils.toArray(".treatment-3");

containersthree.forEach((container) => {
    let tl = gsap.timeline({
        scrollTrigger: {
        trigger: container,
        scrub: true,
        pin: true,
        start: "center center",
        end: "bottom top",
        markers: false,
        },
        defaults: { ease: "none" }
    });
    tl.to(container.querySelector("img"), { scale: 1, x: -500 });
    tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 });
});

 

See the Pen vYdOppv by neontrenton (@neontrenton) on CodePen

[OSUblake 18,472 Likes (Superhero)]

Hi Neontrenton,

 

Sorry to hear about that, but there is not a lot we can really suggest if it works on CodePen as GSAP doesn't do anything special in a WordPress environment.

 

You say the ScrollTrigger events don't work, but how to do you really know that? To debug stuff, I would turn your markers on and maybe add an onUpdate callback to your ScrollTriggers just to log something out so you know if it's working.

 

onUpdate(self) {
  console.log("updating my scrolltrigger", self.progress)
}

 

[GreenSock 18,231 Likes (Superhero)]

I would also recommend making sure that you're loading the most recent version of ScrollTrigger. Your <script> tag seems to be loading GSAP properly from a CDN, but it's loading ScrollTrigger from your own server so there may be a version mis-match.