Jump to content
Search Community

ScrollSmoother + barba.js (update on AJAX call)

kacpergalka test
Moderator Tag

Recommended Posts

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();
	});
},
 
Link to comment
Share on other sites

You have to update your wrapper and content on barba transition 

 

i dispatch new custom event with detail of next barba container

image.thumb.png.2ccec95f61792fdd9b377493f8945d30.png

 

then in class where i have my smooth scroll i listen to that event and update wrapper and content.

image.thumb.png.a84a0a16034fe76d2adcc05800c5a2da.png

 

image.png.b3c8888cbdb0b648a2814fa86253c294.png

 

i hope this helps.

  • Like 2
Link to comment
Share on other sites

Thank you! Killing the instance and reinitializing the ScrollSmoother did the job.

I just wonder, don't you handle history events in a different manner? So users are able to get back to the previous page with the same scroll position, by using history back button and won't start with scrollTop position. I tried below, but for some reason, the scroll position is a little bit different than expected. 

 

if (typeof data.trigger == 'object') {
	Site.smoother.scrollTop(0);
	Site.smoother.kill();
}

typeof data.trigger returns object, if the trigger was DOM element, and string, if it was history event.

Link to comment
Share on other sites

Yes you can do that, 

 

you have to save window offset from top, to check if data.trigger === 'back' and if it is you can do like

Site.smoother.scrollTop(value of window offset) and if it's not equal to 'back', scrollTop to 0.

 

if (data.trigger === 'back') {
  Site.smoother.scrollTop(historyHeight);
} else {
  historyHeight = window.pageYoffset || document.documentElement.scrollTop  || document.body.scrollTop || 0;
  Site.smoother.scrollTop(0);
}
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...