Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
japgroevemaker

After Barba page transition pin of scrolltrigger breaks

Recommended Posts

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:

 

1607213428_Schermafbeelding2022-03-18om14_19.42(1).thumb.png.5c432773a2d2226d65bfe7e6933e9758.png

 

When i refresh:

1529668616_Schermafbeelding2022-03-18om14_19_19.thumb.jpg.0e8003083636521516d927e91b7000ca.jpg

 

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

Link to comment
Share on other sites

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?

 

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×