Proper ScrollTrigger integration when working with CSR Frameworks

[armagansnl]

Hello everyone, I have problems with ScrollTrigger in React and Next.js ecosystem from time to time. There are times when ScrollTrigger does not update itself when the page content changes for any reason, and this causes the placement of triggers to be broken.  In the solutions I encountered in the forum, it is generally recommended to run the ScrollTrigger.refresh() method after the content change, but there may not always be an event etc. that coincides with that exact moment.

In short, I'm wondering if anyone can recommend a robust ScrollTrigger implementation method in CSR libraries like react or isomorphic frameworks like Next.js? Where should it be init, when should it be refreshed, is there a global solution you use for refresh, etc.?

 

For example, I use a global resize detector when working with react and I don't have much problems, but I feel like there should be a much more logical way because when the window height changes because a new tab is opened in safari, it can unnecessarily refresh and cause jumps on the page, etc.

 

Any suggestions would be appreciated. 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates 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 dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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 @armagansnl and welcome to the GSAP Forums!

 

This is quite weird to say the least:

6 hours ago, armagansnl said:

but there may not always be an event etc. that coincides with that exact moment.

There is always a way to know whether when the data is updated (which triggers the re-rendering in React) or when the DOM has been updated. Those are the effect hooks (useEffect and useLayoutEffect).

 

We've seen our fair share of issues and questions in react environments to assert that using those hooks is indeed a reliable way to update GSAP, ScrollTrigger, ScrollSmoother and others instances safely. That's why we created the useGSAP hook:

https://gsap.com/resources/React

 

Finally ScrollTrigger actually watches and debounce resize events, so changing the height of the screen should refresh the ScrollTrigger instances automatically.

 

If you want to ignore the address bar showing/hiding on mobile devices you can use the ignoreMobileResize config in a global fashion:

ScrollTrigger.defaults({
  ignoreMobileResize: true,
});

Or you can use the normalizeScroll method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Happy Tweening!

[armagansnl]

Hello, Rodrigo,

 

Wow, I had no idea about the useGSAP hook, thanks for sharing. I skimmed through the react docs and it seems that the combination of gsap and react has gotten a lot easier with this new hook. Is this a new feature? I was still using gsap.context for cleanups.

 

Quote

There is always a way to know whether whether when the data is updated (which triggers the re-rendering in React) or when the DOM has been updated. Those are the effect hooks (useEffect and useLayoutEffect).

 

What I meant about this part was that it is sometimes hard to find that exact moment, otherwise of course there is always an event or something. Ok, I think I need to do my homework better on these parts. 

 

Thank you for informing me about "ignoreMobileResize", it was exactly what I needed because when ScrollTrigger refreshes on mobile, it causes a short-term stutter. But when I try to use it, I get a typescript error that says;

 

Quote

'ignoreMobileResize' does not exist in type 'StaticVars'

 

Do I need to define a specific type for ScrollTrigger?

 

Thanks for your help.

[Rodrigo]

47 minutes ago, armagansnl said:

But when I try to use it, I get a typescript error

Yeah my bad, I was mixing water and oil here, you should use ScrollTrigger's config method:

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Happy Tweening!