Mikhail_Meal Posted May 7, 2022 Share Posted May 7, 2022 This isn't a question. I'm posting this here because it took me about half a day to realize what's going on. Problem: If you use a from tween the animation get's stuck in the from position OR it animates a very small portion of the start of this tween. Solution: Go to your index.js file and remove the <React.StrictMode> wrapper around your rendered Root component. Explanation (My best guess): The tween actually is fully animating. You can check with onStart/onComplete callbacks. Strict mode causes your components to mount twice. Since GSAP has its own state management system you've created two instances of the from tween. These are competing with each other. Apologies if this is written in the documentation somewhere. I didn't see it. Happy Tweening. 1 Link to comment Share on other sites More sharing options...
akapowl Posted May 7, 2022 Share Posted May 7, 2022 Welcome to the GSAP forums and thanks for the input @Mikhail_Meal This sounds a lot like what was discussed in the recent thread linked below, having emerged with React 18. You might want to check it out because it appears to have some useful insight on this topic - @gaearon from React actually advises on not to remove the strict mode. I'm not a React guy myself - so I might be misunderstanding things in there, but I'm pretty sure it will be helpful to take a look Thank you for supporting GreenSock by being a club member 💪 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