AnarchyPancake

Thank you for your advice, the only stitch in my actual setup as opposed to my codepen demo is that my tabs component is actually a completely separate app from the animation component. We are using a traditional multi-page CMS where these individual items are being rendered as separate apps, as per how our build works with the CMS. Is there a way to use the useref for the tabs app in the animation app to start and stop the animations as per your suggestion? Also this logic would need to live in the animation app due to our set up.

I made the suggested edits so that this will fire off on tab click but the onRefresh property, how can I restart/refresh the animation to fire again from a position of 0 upon the next tab click?

I am having trouble getting my ScrollTrigger animations to fire dynamic animations (those of which are housed in premade functions) that a user selects from a wysisyg on a tabbed template. My setup is using react in conjunction with the GSAP library and things are componentized so we don't really always know what's on the page so we need the component to be able to restart itself. The issue comes when I am trying to trigger the animation upon tab click. OnRefresh it would be great to key off the tab click to be able to restart the ScrollTrigger animation and have it actually only fire upon scrolling to the trigger start point. As it is now, it either restarts the animation upon tab click without waiting for me to scroll to the trigger as it should or like my codepen demo, it fires only once and none of the other elements (brightly colored boxes) animate after clicking the tab and scrolling to the trigger starting point.