ScrollTrigger Horizontal Scroll breaks on resize

[Nurpus]

Hi,
I have a problem with the horizontal scroll when I resize the layout. I guess it is related to some wrong calculation. How can I provide a proper resizing approach in such a situation?

Sometimes, after resizing, extra space appears or the opposite - the last slider cut or even several slides can't be scrolled. I am using invalidateOnRefresh already, but that isn't enough.
 

There is an example - https://codesandbox.io/p/devbox/jt4j6d  Just open the preview in a new tab and make the window resize

I really appreciate any help you can provide.

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Typically this isn't necessary, but if you're still having trouble, you can force ScrollTrigger to refresh after a resize like this: 

window.addEventListener("resize", () => ScrollTrigger.refresh());

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[Nurpus]

Thank you for your answer!
With your recommendation, I've made a minimum demo, but the problem still exists. During resizing, I am still faced with the size calculation of elements (like extra gaps of cutting of slider). 
 

There is a new example - https://stackblitz.com/edit/react-a5itveap?file=src%2FApp.js

Thank you in advance

[Rodrigo]

Hi,

 

I removed a few things that are not really needed from your code, for example the kill method in the return statement of the useGSAP hook and the window resize event handler. Our useGSAP hook does cleanup automatically, so there is no need for that. ScrollTrigger checks and debounces resize events and refresh accordingly so there is no need to do that manually.

 

Here is a fork of your demo that seems to be working as expected:

https://stackblitz.com/edit/react-g6x7phyd?file=src%2FApp.js

 

Hopefully this helps

Happy Tweening!

[Nurpus]

Thanks for the reply

I’ve tried your demo, and unfortunately, the problem persists. I hope this issue is reproducible on your side as well
 

 Thanks for the help

[Rodrigo]

Yeah I forgot to remove that return statement in the code and also I'm using function based values. I updated the demo and seems to work OK on the latest versions of Chrome and Firefox on Ubuntu 22 and the latest Chrome/Firefox/Safari on OSX:

 

https://stackblitz.com/edit/react-g6x7phyd?file=src%2FApp.js

 

Happy Tweening!

[Nurpus]

It is working! Thank you big time!