Astro using React and GSAP issue

[Anastasio]

Hello there,

i'm developing a site using astro and react, and i'm facing some issues.

I have a component that uses matchmedia and a timeline with scrolltrigger to pin the component itself.

When i render two of this component, the second one sometimes starts at the first section's pin spacer start as you can see below:
 

 

Here how it should be:
 

 

I solved this delaying the adding of second component's animation to matchmedia, 

setTimeout(() => mm.add(conditions, scrollAnimation), delay)

but i don't really like this solution.

In the codepen i don't have this problem.

the second issue is when i refresh the page this strange behaviour happenings:
 

There is a way to prevent this?

Thank you all.

 

See the Pen YzOyGGr by andrea-mono (@andrea-mono) on CodePen

[GreenSock]

What looks odd to me is that you're creating the gsap.matchMedia() outside your useLayoutEffect() and then you're trying to reuse that. So I think that gets re-created on every React render. That's probably not good if your cleanup function ends up referencing a different gsap.matchMedia() than contains your animations/ScrollTriggers.

 

Does it work better if you organize things this way (put the matchMedia() and timeline creation inside the useLayoutEffect())?: 

See the Pen MWqamRr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You were saying that the CodePen works fine, right? 

[Anastasio]

On 2/18/2023 at 10:29 PM, GreenSock said:

What looks odd to me is that you're creating the gsap.matchMedia() outside your useLayoutEffect() and then you're trying to reuse that. So I think that gets re-created on every React render. That's probably not good if your cleanup function ends up referencing a different gsap.matchMedia() than contains your animations/ScrollTriggers.

 

Does it work better if you organize things this way (put the matchMedia() and timeline creation inside the useLayoutEffect())?: 

 

 

 

You were saying that the CodePen works fine, right? 

Yes, my codepen works fine. Anyway in the original code the gsap matchmedia is created inside a useMemo, so based on my knowledge, it won't be re-created on every render. I've moved the timeline's creation inside the useLayoutEffect but the result is the same.

[Rodrigo]

Hi,

 

Indeed the instance created with useMemo won't run again unless some of the dependencies (if any) changes. The issue I see with this approach is that, in development mode, the useEffect hook will run twice, but the Match Media instance might remain the same. Maybe this would not be a problem 🤷‍♂️, but this is one of the many uncomfortable wrinkles the double effect call introduces.

 

I never used astro so I can offer any pointers regarding that specific tool. One question does arise: Have you tried a similar setup without astro? Can you replicate the issue without it? Based on the codepen you can't, maybe try Vite or CRA and see what happens. You can post your findings creating an example in Stackblitz so we can take a look at it.

 

Sorry I can't be of more assistance.

Happy Tweening!

[GreenSock]

I wondered if Strict Mode double-invoking useLayoutEffect() may be the cause of the problem, but it seems to work fine, right?: 

See the Pen PodZJEv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

This looked a little odd to me - what's the purpose of this?: 

const {
  gsap,
  ScrollTrigger,
  gsap: { to, set },
} = window

 

If there's any way you could provide a minimal demo that actually shows it broken, that'd be super helpful. If you prefer to use StackBlitz here is a React starter template.