[Astro using React and GSAP issue]

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.

[Astro using React and GSAP issue]

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

[Horizontal and vertical scroll with navigation links problem]

56 minutes ago, OSUblake said:

Just a quick note that version 3.10.3 has been released, so please try testing with the new files.

Hi @OSUblake! I've just updated gsap to 3.10.3 and it works as expected! No resize issue anymore, thank you!

[Horizontal and vertical scroll with navigation links problem]

13 minutes ago, Cassie said:

Ah yes! How about this one.
 

 

Oh i think this might help, but i've found out a solution by myself, thank you anyway!

I have another weird behavior; when the window has been scrolled and after resized, the start and end point of scroll trigger breaks.
A temporary solution,  i used to manage the issue, is to add a resize event listener and when window is resized i disable and re-enable the scroll trigger. This works, but every time i resize the window scroll to the top.
I already tried to use .refresh() but this doesn't help.

[Horizontal and vertical scroll with navigation links problem]

9 minutes ago, Cassie said:

Hello there!

 

That demo doesn't have mixed vertical and horizontal sections like yours.

Maybe this demo will be more helpful.

 

 

 

Thank you, but this example have sections with full width, my sections have dynamic width, you can't know how much larger they will be.

[Horizontal and vertical scroll with navigation links problem]

Hello there.
i'm a gsap newbie and this is my first post on gsap forum, thank you in advance for your help.

 

I have horizontal container, that can simulate horizontal scroll, with dynamic sections that not have defined width and normal vertical sections.

I've spent a lot of time trying to implement navigation between horizontal and vertical sections with anchor links but i haven't no results.

The example here

See the Pen a82e21f8d9c7bce0059159ced099666d by akapowl (@akapowl) on CodePen

seems to not work for me.
 

Someone can help me to make it work?

See the Pen ExopjXm by andreaemm (@andreaemm) on CodePen