Recalculate ScrollSmoother on React Route Change

[fakesamgregory]

I have a React project where I'm using ScrollSmoother and where the route changes in height, the ScrollSmoother does not recalculate. I can force it by resizing the window. 

 

I have tried smoother.scrollTrigger.refresh(), ScrollTrigger.update() to no avail...

 

I'm happy to share my project but there's a few moving parts but wanted to first know if I'm misunderstanding something simple or somebody knows how I might go about this.

 

I guess where the magic happens might be a simple way to start. I'm doing it in the useEffect hook and am able to trigger on route change

 

useEffect(() => {    
    smoother = ScrollSmoother.create({
      effects: true,
      smoothTouch: 0.1,
    }); 
    
    ScrollTrigger.refresh()
  }, [location])

 

[OSUblake]

Welcome to the forums @fakesamgregory

 

Do you think you can make a minimal demo on Codesandbox. Here's an example of how you can import ScrollSmoother on CodeSandbox. Use gsap-trial instead of gsap for the dependency. 

 

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

 

[fakesamgregory]

@OSUblake Thanks for responding! I can't right now but I can tomorrow. Just wondering if this was an issue that's been encountered before I create a project.

[OSUblake]

Just now, fakesamgregory said:

Just wondering if this was an issue that's been encountered before I create a project.

 

It's a new plugin, so there have been some bugs reported, but it's hard to tell if you're doing is one of those bugs without seeing the issue.

 

2 minutes ago, fakesamgregory said:

I can't right now but I can tomorrow.

 

Thanks. And of course the sooner the better as we want to push out the next patch pretty sooon.

 

[fakesamgregory]

@OSUblake I managed to create a sandbox environment and it worked just fine.

 

My specific use case was the loading of images to which I solved by looping through the images and calling ScrollTrigger.refresh().

 

Maybe this'll help others.

 

useEffect(() => {
  if (!smoother) {
    setSmoother(ScrollSmoother.create({
      effects: true,
      smoothTouch: 0.1,
    }))
  }

  // refresh once all images load
  Array.from(document.querySelectorAll('img')).forEach(img => {
    img.addEventListener('load', function() {
      ScrollTrigger.refresh();
    })
  })

  return () => {
    smoother?.kill();
  };
}, [location]);