I'm hoping this is a relatively simple issue to resolve. I'm adding an animation to show page sections as I scroll using IntersectionObserver. I have the animation working fine, but only on the first rendering. If I navigate to a different route and go back to the page with the animation, the animation no longer works (until I refresh the page/reinvoke the script).
How do I ensure the animation works each time the page is visited without a refresh? I've tried adding event listeners to the script and switched the scope of the <script> tag. I don't want to use React useEffect if I don't have to. I'd also like to use the same script across multiple pages/components, so I'm hoping this answer enables that as well. Thank you in advance.