Scrolltrigger problem with react router

[Nwekar]

Hi all!
Actually, i don't understand why my scroll trigger doesn't work i has seen a lot of resource i do the same thing like this not work, the problem i want to trigger the card come from 1 left 1 right to center, and also face another problem when navigating about page then back to home didn't work,hope my problem clear

 

https://codesandbox.io/embed/serene-lucy-1cdcu1?fontsize=14&hidenavigation=1&theme=dark

I'm greatful for any advice! Thank you in advance for your help

[GreenSock]

Hi @Nwekar. I see two problems: 

1. It looks like you meant to loop over each child of homeSector.current.children, but you were just dumping them all into the first element of a new Array and looping over that:

   // BAD
   [homeSector.current.children].forEach(...);
                                         
   // GOOD
   gsap.utils.toArray(homeSector.current.children).forEach(...);

   So the first time through that loop, "el" was actually ALL the children (a NodeList). That's definitely not what you want

2. React is double-calling your useEffect() and you didn't do proper cleanup/reverting of your animation. In React 18, strict mode double-calls useEffect() by default which messes with .from() tweens because those render immediately by default, so the second time through your .from() tween's starting state matches the ending state (no animation). The good news is that the new gsap.context() makes this a lot easier to manage: 

https://codesandbox.io/s/ecstatic-lovelace-0f8pzm

 

Does that clear things up?

[Nwekar]

58 minutes ago, GreenSock said:

Does that clear things up?

you made everything clear, thank you so much, appreciate it

[Nwekar]

1 hour ago, GreenSock said:

The good news is that the new gsap.context() makes this a lot easier to manage: 

sorry for bother you, my problem was solve but i wanna know without using gsap.context() how we can solve it ?

[GreenSock]

Why would you not want to use gsap.context()? It solves a lot of problems, particularly in React. Without it, you'll need to revert() each and every tween and kill() all the ScrollTriggers manually in your cleanup function. Plus, gsap.context() lets you scope all your selector text which saves you the hassle of having to create a Ref for every element you want to animate.