Scrollsmoother, method to refresh?

[VikasGupta]

Hello,

Thank you for the nice plugin.

Basically I want to refresh Scrollsmoother to recalculate page height after a ajax call or any other action by JS.

I am not able to find refresh method here in docs.

 

Is that I need to kill and create every time?

 

[OSUblake]

Try this. 😉

 

ScrollTrigger.refresh();

 

See how I'm calling that after changing the height of the content. Same concept for injecting stuff into the DOM.

 

See the Pen jOYzWRr by GreenSock (@GreenSock) on CodePen

 

[samuelgoddard]

Hey @Blake! How would I use this in a React context?

 

Small example of what I'm trying to achieve below:

let smoother = null;

useEffect(() => {
  smoother = ScrollSmoother.create({
    smooth: 1,
    normalizeScroll: true,
    effects: true
  })
}, [smoother]);

function filterScrollUpdate() {
  smoother.refresh()
}

 

Doing this I get `TypeError: smoother.refresh is not a function`

 

Thank you!

 

[OSUblake]

Just do just do ScrollTrigger.refresh(). There is no refresh method on the smoother instance... at least for now. 

 

 

[OSUblake]

5 minutes ago, OSUblake said:

There is no refresh method on the smoother instance... at least for now. 

 

And even if there was, you would have to use useRef for the smoother.

 

let smoother = useRef();

useEffect(() => {
  smoother.current = ScrollSmoother.create({
    smooth: 1,
    normalizeScroll: true,
    effects: true
  })
}, []);

 

But we'll look at adding a refresh method to the smoother. In the meantime, here's another approach to creating a ScrollSmoother using context.

 

https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js