Jump to content
Search Community

Important React and gsap tip: From Tweens not sequencing properly

Mikhail_Meal test
Moderator Tag

Recommended Posts

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.

  • Thanks 1
Link to comment
Share on other sites

 

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 💪

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...