How to use it with "Barba.js"

Hello. How to use this plugin with barba.js? Is it correct way?

const scroll = new LocomotiveScroll({
	el: document.querySelector('[data-scroll-container]'),
	smooth: true,
	getSpeed: true,
	getDirection: true
});
// tell Barba to use the prefetch module
//barba.use(barbaPrefetch);
barba.hooks.afterEnter((data) => {
	scroll.init();
});
barba.hooks.afterLeave((data) => {
	scroll.destroy();
}); 

[xavierfoucrier]

Hi everyone,

I just add a dedicated LocomotiveScroll section inside the advanced third party scripts documentation on the Barba website. Codepen will come later.

Happy reading! 😉

Related Barba repository issue: https://github.com/barbajs/barba/issues/511

[xavierfoucrier]

Hi everyone,

After a bunch of tests, LocomotiveScroll is well compatible with BarbaJS, but you can encounter issues when implementing it. In fact, you need to deal with:

• The page template Having absolute or fixed elements on your page could end in a bad height calculation from LocomotiveScroll, in this case, always put the data-scroll-container attribute on the section of your site that scroll. (defaults is window.document)

• Barba page lifecycle As Barba makes your site running like a SPA, it won’t reload the whole page so the DOM can contain two Barba containers at the same time… and two Locomotive containers too! (check the Barba lifecycle documentation)

• LocomotiveScroll settings If you don’t use the smooth option, the library works well as LocomotiveScroll is using IntersectionObserver feature… but when smooth option is enabled, the library use the data-scroll-container element in order to build the scroll, so you need to properly target it when next page is ready. (by instantiate LocomotiveScroll again).

I will add a dedicated section in the advanced third party scripts documentation soon, and a codepen example!

😉 ✌️