Asscroll and Barba.js

[MarcoTorcolacci]

Hello Ash,
can you give me some tips to make the two live together?

I start to basic example
barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0 }); } }] });

The transition works then after a while the height of the body is set to 0 and everything disappears.

Thanks!!

[ashthornton]

Hi @MarcoTorcolacci,

I'm not that familiar with Barba but I'm sure you need to apply the same concept as with any other PJAX navigation. Meaning that you need to update the page that ASScroll is scrolling with the new one that Barba loads in. Like this:

asscroll.enable(false, true, document.querySelector('.new-page'))

With .new-page being the page element Barba loads in.

Let me know if this helps you.

[MarcoTorcolacci]

Hi @ashthornton ,
moving the Barba div after the asccroll div is better.
<div class="asscroll-container"> <div class="asscroll-page"> <div data-barba="container" data-barba-namespace="home">

Now I am left with the problem that the size of the page remains the starting one ... so sometimes you see too much white sometimes the page is cut.
I should put something inside the beard beforeEnter that resizes my page height

barba.init({ timeout: 5000, debug: true, transitions: [ { sync: false, beforeEnter() { Asscroll page recalculation???? }, leave: ({ current }) => leaveAnimation(current.container), enter: ({ next }) => enterAnimation(next.container) }, ], });

Thanks

[ashthornton]

Are you running .enable() and .disable() at the correct points during your transition?