GSAP and useState doing weird things

[Rick May]

  @GreenSock helped me with a question a while back (linked at bottom) that helped me a lot.  I've had some time to go back to this project and I'm now having a different problem when I setState .  The gsap gets out of whack and I cannot figure out why.  I'm hoping someone can help me. 

 

Codesandbox:

https://codesandbox.io/s/gsap-and-usestate-icy6b

 

If you visit the watered down version of my problem above..  Press play, stop and shift right.  It works as expected.  However, as soon as you click the Set State button, everything gets screwy with the animation.  Does anyone know what I can do about this?  I'm stumped.

 

Thanks,

Rick

 

original thread: 

 

 

[OSUblake]

First, an animation/timeline/tween is not a state. Use a ref instead. A ref is just like using this in a class component. 

 

When you set state in hooks, you lose everything that wasn't saved in a ref/state. 

https://codesandbox.io/s/gsap-and-usestate-4prg6?file=/src/child1.js

 

I think that is really confusing, which is why I prefer using classes for gsap animations. 

[Rick May]

Thanks @OSUblake.  The timeline in a state had me confused.  But, it was working until I added a feature (unrelated to setting a state, but doing so in the sandbox was the quickest way to demonstrate) to my project a couple of days ago.  I'll take the TL out of a state and go from there. 

 

Thanks for the help. 

 

[Steve Giorgi]

On 4/17/2020 at 3:14 AM, OSUblake said:

First, an animation/timeline/tween is not a state. Use a ref instead. A ref is just like using this in a class component. 

 

When you set state in hooks, you lose everything that wasn't saved in a ref/state. 

https://codesandbox.io/s/gsap-and-usestate-4prg6?file=/src/child1.js

 

I think that is really confusing, which is why I prefer using classes for gsap animations. 

 

 

Hi Blake,

 

Edit: my below question may not apply --- I thought this was originally your example but it may have been part of Rick's original Codesandbox.

 

I'm having a bit of trouble and was looking to see if my question(s) had been answered before posting.  I see in the example that you've created your timeline inside of useEffect.  I was refactoring all of my code in order to avoid this.  Since you've assigned it to a ref first is it then OK to create the timeline inside of useEffect?

[OSUblake]

Hi @Steve Giorgi

 

It's best to create your animations inside a useEffect, and if you need to reference that animation anywhere else, you set it to a ref.

 

This post goes over a little why you should do that. It's using the old gsap syntax, but the concept is still the same.