Asscroll and Barba.js - Githubissues

MarcoTorcolacci commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Hi @ashthornton , moving the Barba div after the asccroll div is better. `

` 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 commented 3 years ago

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

ashthornton / asscroll

Asscroll and Barba.js #39