Share Posted November 16, 2020 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 Link to post Share on other sites
Solution Share Posted November 16, 2020 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. Link to post Share on other sites
Author Share Posted November 16, 2020 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 Link to post Share on other sites
Share Posted November 16, 2020 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? Link to post Share on other sites
Share Posted November 16, 2020 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]); 4 Link to post Share on other sites
Author Share Posted November 16, 2020 @noviedo - thanks a bunch for that.. I would not have arrived at the idea of a useRef to solve this issue.. works great. Link to post Share on other sites