After Barba page transition pin of scrolltrigger breaks

[japgroevemaker]

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

[OSUblake]

Hi @japgroevemaker

 

I moved your thread to the GSAP forum as it's not Banner related.

 

It's hard to say what is wrong as we don't provide support for third party tools like Barba, and it's even harder to say what the issue is without a working demo we can play with. 

 

Have you searched the forum for Barba questions, maybe some of these can help you out?