badtant Posted June 16, 2020 Share Posted June 16, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 16, 2020 Share Posted June 16, 2020 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 }); Link to comment Share on other sites More sharing options...
badtant Posted June 17, 2020 Author Share Posted June 17, 2020 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 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