Barba + ScrollTrigger Janky Timeline After Transition

[mulegoat]

Hi everyone,

 

I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. 

 

If anybody has any experience in using these libraries together and has any advice that would be great! 

 

Many thanks 

 

https://codepen.io/mulegoat/project/editor/XvJVNP

See the Pen XvJVNP by mulegoat (@mulegoat) on CodePen

[ZachSaucier]

Hey mulegoat. It's hard to debug larger projects like this. 

 

I think these statements should be switched in order for one:

// Bad
initSmoothScroll(data.next.container);
scroll.destroy();

// Good
scroll.destroy();
initSmoothScroll(data.next.container);

I'm also not sure if you need this:

// reinit locomotive scroll
scroll.init();

 

Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...

[mulegoat]

Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!!

 

Barba does have a Slack channel but who wants to live like that?! 

[ZachSaucier]

Hah, I'm glad it helped!