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