Jump to content
Search Community

Scrolltrigger Only Working Properly When Logged into Wordpress

neontrenton test
Moderator Tag

Recommended Posts

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="/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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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. 

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...