gsap with scrub not working on react on first mount (?)

[bandinopla]

I'm using react (18.3.1)
Why could it be that this doesn't work at the start if I refresh the page that has this component, but either if I open the dev console (F12) it starts working or if I navigate to another link on my site and then come back... it is weird.

    useGSAP(
        () => {  
          
                const boxes = gsap.utils.toArray('.featureBox');
                      boxes.forEach((box) => {
                          gsap.from(box, {
                                          x: 250,
                                          scrollTrigger: {
                                              trigger: box,
                                              start: 'top bottom',
                                              end: 'top 10%',
                                              scrub: true,  
                                              markers:true 
                                          }
                          });
                      });  
         
        },
        { scope: featuresRef }
      ); 

[jackdoyle]

It's super difficult to troubleshoot without a minimal demo - can you provide a stackblitz that clearly illustrates the issue? Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j

It sounds like maybe some kind of issue with your build process (maybe). Did you check to see if the code is actually running when you expect? And are there .featureBox elements in the DOM at that point?

[bandinopla]

@jackdoyle there's nothing special about my code, I just basically copy pasted the code from here: https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

The weird thing is that it works ok if I just open the dev console, or if i navigate to another page and come back to the page that has the element...

Messing arround if I wrap the code inside the useGSAP in a requestAnimationFrame it also works (but it breaks the internal cleanup on unmount so not gonna use it)

sometimes changing from gsap.fromto gsap.to also sometimes make it work... it is weird. It is hard to reproduce.
Mabe it has something to do with devmode in react 18 ? the double useEffect trigger??

[jackdoyle]

Are you able to reproduce the problem in that Stackblitz link you shared? I can't.

I don't think the problem is in your code - it kinda sounds like a build process issue on your end maybe. The double-invocation thing in React 18+ is solved by useGSAP() and its cleanup.

I just need a way to clearly reproduce the problem you're seeing.