Andy Bui Posted September 5, 2023 Share Posted September 5, 2023 Hi GSAP people, Â Sorry for cannot providing codepen at the moment, I will provide it later. This is my first time using react and trying to do with GSAP animation, but when I run the website the animation is not executed, I even try to refresh and hard refresh but nothing happen. But when I update the code and save it , the code now can be runned, jsut do 1 small update and the animation will run, but not when refreshing the page. Can anyone help me on this please ? Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 5, 2023 Share Posted September 5, 2023 Without a demo we can't test anything for you. The only thing I can see is that you use React.useEffect() and our docs uses useLayoutEffect(), see the following post  You're also using the old V2 syntax, but this would not change the animation, you do ave a weird position parameter `+=0.0`, this seems unnecessary and maybe even breaks the animation, but I can't test it without a minimal demo. Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
Andy Bui Posted September 5, 2023 Author Share Posted September 5, 2023 hi @mvaneijgen Here is my codepen: See the Pen ExGNjLy by tcb2307 (@tcb2307) on CodePen In this codepen, the code is not even running because it is not in live server. But in live server, it will run when we did some changes and save on the code, but not happening when we reload the page Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 5, 2023 Share Posted September 5, 2023 Using Codepen is a suggestion, if you must working in React, you can also use our Stackblitz starter templates that you can fork, here is the one for React Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted September 5, 2023 Solution Share Posted September 5, 2023 Oh, your pen was running fine. Ignore my last message.  I've moved your boxes variable to inside the useLayoutEffect and it works fine. You're better of not animating properties like top, left, bottom, right, animating the transform properties are much more performant.  I've also moved the duration property to inside the tween object. Hope it helps and happy tweening!  See the Pen dywOoxd?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Andy Bui Posted September 5, 2023 Author Share Posted September 5, 2023 @mvaneijgen OMG Thanks a lot, I didn't know the solution was that easy. Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 5, 2023 Share Posted September 5, 2023 Me neither. I never use React, I just console.log(boxes) and saw the it was empty. Then I tried moving the variable to inside the useLayoutEffect() to see if it made a difference and it did! That shows you debugging is really important when developing something 😅 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 5, 2023 Share Posted September 5, 2023 Yeah, Mitchel is right about debugging as much as possible in every scenario. Â The reason why your boxes weren't present is because a mix of JS and how React works. So basically the part of your code with the toArray() method was running before the return statement of your component, so at that point the boxes weren't present in the DOM, hence the empty array. Using useLayoutEffect guarantees that the hook will be ran after the DOM has been updated on the first render of the component (that because of the empty dependencies array) and the boxes will be there. Â Finally I'd strongly recommend you to read the resources in the React page of our Learning Center: Â Hopefully this clear things up. Happy Tweening! 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