Gatsby + ScrollSmoother

[Eduardo Muramoto]

Hi,

I'm currently adding ScrollSmoother to a Gatsby website. It seems like the height of the page is not updating when I render a new page or there's a rehydration.
I was wondering if there's a way of refreshing ScrollSmoother or updating it.

 

Another thing that I wanted to know if there's a way that I can use listeners like "onUpdate: (self) => {}" when I use ScrollSmoother.get() in a different component.

[OSUblake]

Welcome to the forums @Eduardo Muramoto

 

Just call ScrollTrigger.refresh() to update ScrollSmoother.

 

19 minutes ago, Eduardo Muramoto said:

Another thing that I wanted to know if there's a way that I can use listeners like "onUpdate: (self) => {}" when I use ScrollSmoother.get() in a different component.

 

No, but maybe we add a way to do that in the future. Here's just a quicky example of how you could do that by making your own custom add/remove listener.

 

https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-irmojq?file=/pages/_app.js

 

[Eduardo Muramoto]

Thanks @OSUblake.

I think that custom listener will work for me.