React Testimonial with ScrollTrigger

[TaiwoJazz]

Hi guys. It's me again.

I'm trying to achieve this animation where the text get it's original color and also remove the image overlay.

I think my current logic can be better and i shouldn't have to create multiple timelines but i'm kind of lost in it.

Here is my demo https://stackblitz.com/edit/gsap-react-basic-f48716-59toq4?file=src%2FApp.js

The text on the left and the image on the right are supposed to play together and change to the next one till the last item and then we unpin.

[Rodrigo]

Hi,

 

I don't think this is GSAP related. You have a huge content shift in your app which is causing this. Here is a video I made of a fork of your demo:

https://i.imgur.com/u1hIC5G.mp4

 

That fork is not using GSAP/useGSAP at all and you can see how the blue section appears and shifts everything down:

https://stackblitz.com/edit/gsap-react-basic-f48716-nttu4z?file=src%2FApp.js

 

Since you're using images I would suggest you to wait for all the images to be loaded before creating your ScrollTrigger instances and use contextSafe inside your useGSAP hook in order to ensure that the GSAP Timelines are added to the GSAP Context created by useGSAP.

 

Here is a super simple demo:

https://stackblitz.com/edit/gsap-react-basic-f48716-ianhlx

 

Hopefully this helps.

Happy Tweening!

[TaiwoJazz]

I will go back and come up with a better logic for this. Thanks.