Nwekar Posted September 20, 2022 Share Posted September 20, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 20, 2022 Solution Share Posted September 20, 2022 Hi @Nwekar. I see two problems: 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 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? 3 Link to comment Share on other sites More sharing options...
Nwekar Posted September 20, 2022 Author Share Posted September 20, 2022 58 minutes ago, GreenSock said: Does that clear things up? you made everything clear, thank you so much, appreciate it Link to comment Share on other sites More sharing options...
Nwekar Posted September 20, 2022 Author Share Posted September 20, 2022 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 ? Link to comment Share on other sites More sharing options...
GreenSock Posted September 20, 2022 Share Posted September 20, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now