react SmoothScroll and reactive linking

[KStd]

Hi All.

I am building a site based on shopify hydrogen (react, remix).
SmoothScroll works correctly everywhere except where I need to reactively change the url without changing the current location on the page.
I.e. for the user everything happens unnoticeably, it can be a simple add to cart via fetch or it can be a link click on NavLink component using preventScrollReset={true} flag.
This means that no matter how high the user is on the page, he remains on it, without visible changes.
However, when using SmoothScroll, every such action means that it must animate a smooth scroll to the block of the screen the user was on.

Is there any way to disable scrolling after a reactive url change? Unless of course it's an anchor, anchors require scrolling.
 

[GSAP Helper]

We would love to see a minimal demo to help you debug, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

You could try a combination of the paused() method, scrollTop() method and the scrollTo() method:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/paused()

https://gsap.com/docs/v3/Plugins/ScrollSmoother/scrollTop()

https://gsap.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

Hopefully this helps

Happy Tweening!

[KStd]

4 hours ago, Rodrigo said:

combination of the paused() 

 

thanks for answer. I've tried that, but the react runs faster than the race, apparently.

I wanted to deploy a test environment to codepen.io, but remix doesn't work there and reactDom is also somehow inadequate.
I would deploy it to codesandbox.io, but I don't know if I have the right to host the paid scrollSmooth plugin there.

[Rodrigo]

Hi,

 

You can create a demo in either Stackblitz or codesandbox (we prefer Stackblitz though):

https://stackblitz.com/

 

For that you can install the GSAP Trial package in order to use the bonus Plugins there:

https://www.npmjs.com/package/gsap-trial

 

Happy Tweening!

[Rodrigo]

10 minutes ago, KStd said:

I've tried that, but the react runs faster than the race, apparently.

That's why I mentioned the scrollTop and scrollTo methods as well, you can get the current scroll position with the scrollTop method (both getter and setter) and then use the scrollTo method to go to that scroll position immediately, something like this:

const smoother = useRef();

useGSAP(() => {
  smoother.current = ScrollSmoother.create({
    // ...
  });
});

const clickHandler = () => {
  const currentScroll = smoother.scrollTop();
  smoother.paused(true);
  // Use the scrollTo method
  smoother.scrollTo(currentScroll);
  // Or use the same scrollTop() method as a setter
  smoother.scrollTop(currentScroll);
};

That's pretty much the gist of my suggestion.

 

Hopefully this helps

Happy Tweening!

[KStd]

11 hours ago, Rodrigo said:

That's why I mentioned the scrollTop and scrollTo methods as well, you can get the current scroll position with the scrollTop method (both getter and setter) and then use the scrollTo method to go to that scroll position immediately, something like this:

Thanks for your help. I will try your solution.

 

I deployed a test environment with demo data to show and on a clean remix and it turned out that everything works correctly there.
Apparently this is a problem with shopify hydrogen, and it cannot be run in a test environment without access to the store api.
I have disabled smoothScrolling in the project for now, because I need to launch the shop in a short time.

I will come back to this issue when I have time.