Hello everybody,
I'm facing a problem with my scrolltrigger. I made an horizontal scroll with scrolltrigger with pin true, but when i navigate to the page with barba my pin breaks. It looks like it is breaking through my pin. When i refresh the page it is working as expected. I don't know how to create an codepen using barba so i hope that i'm clear enough. I'm attaching some images that shows my problem.
When i navigate:
When i refresh:
I've tried to kill al my scrolltriggers and re-init them again, but nothing seems to solve my problem. I hope somebody can help me.
function initTimeline() {
var main = gsap.timeline({
scrollTrigger: {
trigger: container,
snap: 1 / (items.length - 1),
start: "top top",
end: "+=" + (totalWidth / (items.length - 1)).toString(),
scrub: 1,
pin: true,
invalidateOnRefresh: true,
}
})
}
// adding items to timeline
main.to(items, {
xPercent: -100 * (items.length - 1),
ease: "none",
});
// Kill scrolltriggers in beforeLeave barba hook
barba.hooks.beforeLeave(() => {
ScrollTrigger.getAll().forEach(tl => tl.kill());
})
//Re-init scrolltrigger in after hook
barba.hooks.after(initTimeline);
Thanks in advance!
Cheers