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 ❤️

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

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

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 ?

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