Read react state when animation completes

[badtant]

Hi,

 

So I have a counter as a react state. It increments with the "add" button.
When the animation completes after 5 seconds i want to console.log the current counter state.

The problem is that it's always 0 even if I can see that the counter updates.

https://jsfiddle.net/Lm1jzfpe/18/

What am I doing wrong here?

[ZachSaucier]

Hey badtant and welcome to the GreenSock forums! This is just a React question, not a GSAP one, but I'll help anyway.

 

The issue is that you didn't pass in the state to your useEffect so it essentially creates a new variable called count. If you want to access your state, you need to pass it inside of the second parameter where you currently have an empty array. But then it will run it again when the state changes, which isn't what you want. This is a good article on the subject.

 

Why not just use a class instead?

 

As for your actual GSAP code, don't use translateX. Just use x. And you don't need to include the px or make the values strings:

gsap.fromTo(boxRef.current, { 
  x: 0 
}, {
  x: 500,
  duration: 5,
  onComplete: complete
});

 

[badtant]

Thanks for the help! Wasn't sure if it was related to gsap or react

I solved it with a ref like described here: https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks