Hello,
I can't make ScrollSmoother work with AJAX transitions using barba.js library. The problem is, that the ScrollSmoother isn't updating properly. It's not updating the content height, and the effects on new page won't apply. How should I approach it? Below are the basic functions I use, and the structure. I used it exactly the same with Locomotive Scroll, before I tried to move to GSAP solution.
ScrollTrigger.refresh(); doesn't seem to do anything.
I will appreciate your help. Thanks.
<div id="site" data-barba="wrapper">
<div id="smooth-wrapper">
<div id="smooth-content">
<main data-barba="container">
<?php the_content(); ?>
</main>
</div>
</div>
</div>
initScroll: () => {
Site.smoother = ScrollSmoother.create({
wrapper: '#smooth-wrapper',
content: '#smooth-content',
smooth: 1.5,
effects: true,
smoothTouch: 0.1,
});
},
initTransitions: () => {
barba.init({
transitions: [
{
name: 'default-transition',
leave(data) {
},
enter() {
},
}
],
});
barba.hooks.beforeLeave((data) => {
});
barba.hooks.after((data) => {
Site.reinit();
ScrollSmoother.scrollTop(0);
ScrollTrigger.refresh();
});
},