Daniel-HC

Thanks so much! Changing from tl = gsap.current.timeline() to let tl = gsap.timeline() enabled me to later perform tl.kill(), which did the trick. I was originally using gsap.current after reading the 'Using GSAP with React' tutorials -- but this prevented me from having access to tl.kill(). Thanks for the speedy response!!!

I have multiple "screens" (each in their own React component) that have their own animations. Each screen is made up of entirely different contents that take up the entire screen, so non-active screens need to be hidden (or unmounted). You can swap between the screens using the navigation at the top. Swapping between screens typically works, unless: You are swapping away from a screen whose animation tweens a number and sets the innerHTML of an element, AND This animation is not complete. I've created a minimum demo here [https://codesandbox.io/s/quiet-water-qvze5w?file=/src/App.js] To see the error, click to navigate to Screen 2 (which counts up to 5,000 over 10 seconds), and then switch BACK to Screen 1 before the animation is complete. The errors I get are: Cannot set properties of null (setting 'innerHTML') on line 13 of Screen2.js. This error repeats thousands of times and halts the rest of the program from continuing. A follow-up question, it seems like I should not be creating/destroying the screens based on whether they are active (by wrapping them in {activeScreen === "screen1" && <Screen1 />} , as this recreates the animation timelines every time I swap screens. (While it is fine in this simple demo, the screens in my actual app are much more complicated with many moving pieces.) It would also be great to have the animations stay at their end/completion state so that when I swap back to a screen, it does not perform the animation again, but instead just shows the end of the animation. Any advice on that front would be very appreciated!