Jump to content
GreenSock

mdelp

ScrollSmoother / Barba.js

Recommended Posts

Hi All,

 

I'm integrating ScrollSmoother in my new website and am using Barba.js to handle the page transitions. Everything seems to be working, just one little thing where I'm stuck. A Codepen is a little tricky because there's alot going on, but I'll try to explain.

 

Since Barba doesn't use page refreshes the ScrollSmoother is not created each page but instead uses the instance of the first load. So I need to create a ScrollSmoother every new page transition, which is OK, but after every page enter I need to scroll to the top and this needs to be instant, otherwise it uses the scroll position of the previous page.

 

What happens now is that the page transition fires, but then the window.scrollTo() is a smooth while it needs to be instant.

I tried to .kill() the ScrollSmoother every page leave, but since the ScrollSmoother is created in a Barba hook each time I can't access the variable.

 

Maybe I'm missing something or making it too complicated? Any help would be appreciated!

 

Edit: you can see whats happening on https://dev.mathieudelporte.be/md/. Scroll to the footer and click on 'Over mij', you'll see the transition and the scroll to top happening this way.

See the Pen ZErdNVR by mathieudelporte (@mathieudelporte) on CodePen

Link to comment
Share on other sites

Hello @mdelp

 

You could try ScrollSmoother's own .scrollTo() method which has an option for wether to apply smoothing to the scroll or jump in position instantly.

 

The default should be jumping instantly.

 

smoother.scrollTo(0)

 

See the Pen gOvNNam by akapowl (@akapowl) on CodePen

 

 

 

If that doesn't work for you, maybe you can fork this example on stackblitz and adjust it a bit to fit your scenario, so we can have a look.

 

https://stackblitz.com/edit/web-platform-j6l93d?file=index.html

 

  • Like 1
Link to comment
Share on other sites

Hi @akapowl! I'll have a look at the Stackblitz link, smoother.scrollTo() doesn't do the trick for now!

Link to comment
Share on other sites

 

I just noticed that stackblitz might actually not be the best idea, since ScrollSmoother is a Club GreenSock plugin.

 

You can use testversions of the Club-Plugins on CodeSandbox though, so if you can get a minimal demo running on there, that would be awesome!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

@akapowl, I got around to setting up a sandbox, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. Really weird because I have it setup like my own project but somehow here it works, so something must be off in my own code.

 

I do have some questions though while we're at it. What's happening is I have a small smootherInit function that runs the first browser load (barba.once) and then on every page transition again (barba.afterEnter).

 

I have to rerun it on every page transition because it needs to recalculate the height of the page, does that make sense? Also, is it necessary to kill all scrolltriggers every time I transition to a new page? Does this have some kind of impact on performance?

 

If you see some major flaws in the code feel free to correct me!

Link to comment
Share on other sites

1 hour ago, mdelp said:

Also, is it necessary to kill all scrolltriggers every time I transition to a new page?

 

Yes ... just like you have to remove e.g. any eventListeners you created, you should defnitely do that - not only to make sure everything will run as expected, but also because you may be creating serious memory leaks if you don't and things pile up.

 

This here is just a very basic example logging out a number - not that it gets dangerously close to crashing your computer or something - but just imagine things piling up like that with many more ScrollTriggers on a page and some of them doing some complex stuff onUpdate e.g.

 

https://codesandbox.io/s/h59k6h?file=/src/index.js

 

 

 

1 hour ago, mdelp said:

What's happening is I have a small smootherInit function that runs the first browser load (barba.once) and then on every page transition again (barba.afterEnter).

 

I have to rerun it on every page transition because it needs to recalculate the height of the page, does that make sense?

 

It does make sense, but I think it also sort of depends. I tinkered around with barba in combination with scroll-smoother myself a bit in the meantime and I had my barba-container wrapped by the smooth-content and smooth-wrapper just like you have, when doing so.

 

I actually got to (only) recalculate the scroll height just fine by calling a ScrollTrigger.refresh() after a transition - which does not appear do to the trick alone in your example - not sure why though, maybe I just missed something in a hurry here.

 

But creating a new ScrollSmoother is something I would definitely recommend anyway though, because if you e.g. use ScrollSmoother's built-in effects, it will probably not know about the new elements on the page (but still target the old elements that aren't there anymore) if you don't - at least I couldn't get it to work after a transition, if I didn't re-create ScrollSmoother on the new page after the transition but solely called a refresh.

 

I would also suggest specifically killing the old ScrollSmoother instance as well when you leave a page - it looks like there will be only one instance on the page anyway, because ScrollSmoother probably is clever enough to manage itself there when another instance is created, but it shouldn't hurt to kill it and doing so might prevent possible problems you may run into later on - and it could become tricky to find what's causing them then. 

 

FYI - both hooks you use for the creation of ScrollSmoother fire on first page load - so technically there isn't actually the need to also put the creation it in the once hook. Which hooks fire when is something you should consider diving deeper into when using barba, as it might also create problems at some point if you call something multiple times that is supposed to be fired explicitely only once e.g.

 

Another barba "thing" is that the current and next container will be in the DOM for a certain amount of time during the transition lifecycle, so if you create new ScrollTriggers while that is the case, they will/might not have their starts and ends where you would expect them to be. So if you don't use synced transitions with barba, it would be best to manually remove the current container at a point when it's safe to do so - before creating STs.

 

And now in hindsight, I realize that this is also the reason, why I couldn't get to recalculate the scroll height properly with a simple refresh call as mentioned before - because earlier I had forgotten to do that 🤷‍♂️

 

I'll stop right here, because these are the GSAP forums after all - but those should also be the most relevant points - I hope this will help a bit.

 

  • Like 2
Link to comment
Share on other sites

@akapowl thanks for your insights, much appreciated! I'm going to test a few more things, but I understand the workings of ScrollTrigger and ScrollSmoother a bit better now!

Link to comment
Share on other sites

  • 4 weeks later...

@akapowl, been a while but wanted to let you know that the original problem of the smooth scrolling to the top on each page transition was fixed by doing:

 

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'instant'
});

Apparantly the instant was needed in my setup.

  • Like 1
  • Thanks 1
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.
×