timeline .paused() attribute doesn't update?

[RoyM]

Hi folks - could someone help me with why the button label doesn't toggle correctly, even though the animation pauses/plays correctly... thanks

I'm using react hooks and the demo is in codesandbox, not codepen: https://codesandbox.io/s/dazzling-ives-yztz0?file=/src/App.js

[ZachSaucier]

Hey roy and welcome to the GreenSock forums.

 

The text doesn't update because you're not telling it to: you call the function to get the value when things are initialized but don't call the method ever again. So it stays on the initial value. You need to create some way of telling it to update.

 

Without using React, I'd create a variable reference to the element whose text should be updated. Then in the playHandler I'd update the text. In React I guess you'd use a ref to do the same thing but I'm not very familiar with React.

[RoyM]

Thanks for that, Zach.. I modified and forked the code as shown here, since my next issue is different than this one.
 - now my issue is that I'm not able to toggle the "paused" state correctly. It keeps zipping back to the beginning and re-running.

Could this be an artifact of using fromTo?

 

https://codesandbox.io/s/busy-hooks-8h5gj?file=/src/DemoApp.css

[ZachSaucier]

5 minutes ago, RoyM said:

Could this be an artifact of using fromTo?

No, again it's a React issue. Your useEffect hook keeps getting entered: https://codesandbox.io/s/wizardly-flower-nym6n

 

I'm not familiar with React enough to help you. Maybe @Rodrigo or @elegantseagulls can help out?

[noviedo]

Hey @RoyM, I just did a fork, and also I replaced your masterTL by a useRef() hook, so in this way works. You can check it here: https://codesandbox.io/s/flamboyant-solomon-vdis4

 

const masterTL = useRef(null);

useEffect(() => {
    masterTL.current = gsap.timeline({
      repeat: -1,
      paused: true
    });
}, [masterTL]);

 

[RoyM]

@noviedo - thanks a bunch for that.. I would not have arrived at the idea of a useRef to solve this issue.. works great.