ScrollTrigger don't work when page is loaded with ajax

[michelgege]

Hello, first I wan't to give a big thanks to gsap creators. gsap is insane and scrolltrigger is THE thing that was missing to make gsap perfect.

 

But i have troubles with Scrolltrigger, scrolltrigger works perfectly when I load a page, but my website uses ajax transitions between pages, and I can't figure out how to make my animations works again when I navigate to another page.

I don't have errors in console, but triggers just don't do anything. I tried to use the refresh() method,  or kill() on my scrolltrigger instance and then reload the js, but they don't seems to do the job. My ScrollTrigger declaration looks like this : 

initMainAnimations() {
    const selector =
        ".feature h3, " +
        ".feature .img-container, " +
        ".feature p, " +
        ".feature a, " +
        "#see-also .other";

    const targets = gsap.utils.toArray(selector);
    targets.forEach((target) => {
        ScrollTrigger.create({
            trigger : target,
            onEnter : () => target.classList.add('active'),
            onEnterBack : () => target.classList.add('active'),
            start : "top 95%",
            id : 'main_scroll_trigger'
        })
    });
}

 

(I use barba.js for pages transitions)

To be honest i'm lost and i don't really know even theoretically what to do to solve this problem. Maybe gsap can't find ajax loaded elements because of the DOM being modified ? Maybe there is a way to drop everything related to gsap and reload my js ? 

Maybe it's a noob's question and i'm really sorry if it's easy but i really have no idea of what to do... 
(sorry for bad english) 

Sorry i have no codepen to reproduce the case but I don't find a way to give you a small exemple of that, I can put the website online in case it helps. Let me know if you want to see more code. 

 

/* EDIT */

gsap actually find targets (it works if i log targets ) But if I set markers to true , I see that they are all on top of the page. even if I use the barba hook afterwhich fires my js after transition is fully done, gsap seems to create triggers before everything is loaded

[ZachSaucier]

Hey michelgege and welcome to the GreenSock forums!

 

4 hours ago, michelgege said:

Maybe gsap can't find ajax loaded elements because of the DOM being modified ?

GSAP can find anything that's in the DOM at the time when you tell it to check.

 

4 hours ago, michelgege said:

Maybe there is a way to drop everything related to gsap and reload my js ? 

I'm betting that the core issue is that the targets that you originally gave to GSAP are removed from the DOM when the page transitions. Most likely your best bet is to kill off the old tweens/ScrollTriggers and create new ones once the new page has fully loaded.

[michelgege]

Hi Zach, thanks for the reply! 
So i tried to kill my ScrollTriggers :

ScrollTrigger.getById('main_scroll_trigger').kill();

Then i re-create the same Scrolltrigger instance with the code in the first message i posted, but it don't totally works, triggers works only if I resize my window after everything is loaded. 

Do you see any kind of solution ? 

 

 

[ZachSaucier]

Hard to say without seeing a demo of the issue. Are you sure that the new ScrollTrigger is created after everything is fully loaded (including rendering for the first time)?

[michelgege]

You can see the issue on http://devmr.benoitbarberot.fr/dematerialisation/

if you navigate between the pages "dématérialisation", "chargé de production" and "chargé de casting", you'll see that when the page is loaded normally, scrolltrigger works as a charm, then if you go to another page, it will not work until you resize your window. 

Quote

Are you sure that the new ScrollTrigger is created after everything is fully loaded (including rendering for the first time)?

I think so, as I said I use barba.js to manage ajax transition, and with barba you can use differents hooks to call some Javascript. I use the hookafter  which, as they say, launch after everything :  https://barba.js.org/docs/advanced/hooks/ ( you can see it on the table on top of the website) 

I don't know if there is any JS way to make it happen later.. 

[ZachSaucier]

I just answered another question about Barba.js:

 

The main issue there was that the content had not been fully loaded before recreating the ScrollTrigger. Adding a simple setTimeout for the function that created the ScrollTrigger fixed the issue. Please try doing the same thing in your project  

[michelgege]

Well I tried to add a timeout but it didn't change anything... even with a giant timeout, nothing happens... As you can see markers are appearing on top of page even if i put like 10 sec timeout :

 

 

 

Sorry to bother you with my barba.js problems....

 

[michelgege]

 

OOooooK I have no idea why this works instead of only calling the function with a timeout, but if I create my scroll triggers "normally", and then add a scrollTrigger.refresh() in the timeout, it works perfectly ! 

 

Thanks again Zach for your precious help, and thanks to all gsap's team, keep it like this ❤️

[emilychews]

Hi @michelgege

 

Did you have any basic code / pseudo code you could post showing your setTimeout solution. I can't get this to work.

 

I have the function, and it's function call, within a setTimeout as given in the example below - but alas it isn't working?
 

setTimeout(function(){

    scrollTrigger.refresh()

    function pinMiddleFunction() {
        var pinMiddle = gsap.timeline({scrollTrigger: {
            trigger: ".pin-section",
            start: "50% 50%",
            end: "+=650",
            pin: true,
            markers: true
          }})
        }
    pinMiddleFunction()

}, 1000)