Next container is not properly inserted in the DOM

[bossybe]

Hello all,

I would like to make Barba CSS work with Locomotive-scroll.
I do a simple opacity transition and a smooth scroll. Both work perfectly separately but together it doesn't work anymore.

My code :

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

barba.hooks.after(() => {
  scroll.init();
});

barba.use(barbaCss);
barba.use(barbaPrefetch);
barba.init()

While examining the dom, I noticed that at the change of page my <div data-barba = "container"> go out of my <main data-scroll-container>

Why does it do that? This problem happens when I use the @barba/css plugin, without it everything works.

Thank you in advance for your help

[xavierfoucrier]

Hi @bossybe,

I will need some time to check and see what's going on.
Thanks for your patience! 😉

[dmitriyakkerman]

Hi guys! Any updates here? I have the same behavior.

[xavierfoucrier]

Hi @dmitriyakkerman,

Sorry I am busy right now, working to release a project at end of month.
I will have time for a complete check next month, stay tuned! 😉

[PubliAlex]

Hello,

I confirm an issue with barba CSS, it move the whold data-barba="container" div to the very end of the page (just before the end of the body) When I remove the barbaCSS script and use JS transition instead, it works as expected.

[xavierfoucrier]

Hello 👋
Sorry for the long delay.

It's not related to Locomotive Scroll, but more similar to the issue #479. I already fixed it last week, but it looks in some situation it can be improved, especially when dealing with a more complex DOM structure.