Sequential Block and Vector Change with ScrollTrigger: Stuck at the First Block

[Semih]

When I scroll down using ScrollTrigger, I want the blocks and vectors to change sequentially. However, I'm getting stuck only on the first block. What should I do to continue?

 

https://stackblitz.com/edit/stackblitz-starters-kkrasz?description=A create-react-app project based on react and react-dom&file=src%2FApp.js,src%2FServices.css&title=React Starter

[Toso]

hi @Semih to be honest I'm not sure what you want to do here since in the code you are just selecting the first element with querySelector adding an active class to it and removing it when onLeaveBack ,

 

for a starting point you need to use the gsap.context() inside your useEffect or useLayoutEffect and here is a demo of how it works with react/next  https://gsap.com/docs/v3/GSAP/gsap.context()#react-demo 

 

or you can use useGSAP() hook its easier  https://gsap.com/resources/React#usegsap-hook-

 

something like this https://stackblitz.com/edit/stackblitz-starters-r9fccn?file=src%2FApp.js

 

Here's just pinning the .sas div with one ScrollTrigger and the other loop to toggle the class active between them 

[Rodrigo]

Hi,

 

I'm not sure I follow exactly what you're trying to do, but as @Toso shows in his demo, the main issue here is the fact that you're using onToggle in a wrong way and that you're not doing proper cleanup of the ScrollTrigger instance that pins the element.

 

Either use GSAP Context:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Or use our new useGSAP hook to simplify things quite a bit:

https://gsap.com/resources/React

 

Here is a demo using useGSAP for that result:

https://stackblitz.com/edit/stackblitz-starters-sz6hxj?description=A create-react-app project based on react and react-dom&file=src%2FApp.js&title=React Starter

 

Hopefully this helps.

Happy Tweening!