Rick May Posted April 17, 2020 Share Posted April 17, 2020 @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: Link to comment Share on other sites More sharing options...
OSUblake Posted April 17, 2020 Share Posted April 17, 2020 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. 6 1 Link to comment Share on other sites More sharing options...
Rick May Posted April 17, 2020 Author Share Posted April 17, 2020 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. 1 Link to comment Share on other sites More sharing options...
Steve Giorgi Posted June 6, 2021 Share Posted June 6, 2021 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? Link to comment Share on other sites More sharing options...
OSUblake Posted June 7, 2021 Share Posted June 7, 2021 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. 2 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