OOPSStudio

Let's say I have an array of objects that I'm animating. I run 3 animations on them each time they're clicked, and I run 1 animation on each every time any other one is clicked. (3 animations to get from dormant -> active, 1 animation to go from active -> dormant.) If I click two of the objects rapidly, then the dormant -> active animation completes after the active -> dormant animation and the dormant elements appear with active styling... So, my solution would be to clear their animations each time they're returned to dormant, therefor preventing them from being stuck in active. How could I do this?? I would want something like nameOfArrayHoldingAllObjects.killAllAnimationsAndReturnToZeroProgress() I've been searching the forums and the videos and everything I can, but I can't find something like this anywhere. I found something called kill(), but that only works for timelines. I also found something like killAll() but if I try to use that I get an error... My code so far: <script> var circles = document.getElementsByClassName("circle"); gsap.from(circles,{ duration: 0.5, x: -50, opacity: 0, rotation: 180, ease: "back", stagger: 0.1 }); $(".circle").hover(function(){ gsap.to(this,{ duration: 0.2, opacity: 0.5 }); document.body.style.cursor = "pointer"; },function(){ gsap.to(this,{ duration: 0.2, opacity: 1 }); document.body.style.cursor = "default"; }); $(".circle").click(function(){ // Here is where I would like to clear all animations on all circles, something like `circles.killAllAnimationsAndReturnToZeroProgress()` gsap.to(circles,{ duration: 0.5, scale: 1, ease: "bounce", rotation: 0, backgroundColor: "red" }); gsap.to(this,{ duration: 0.5, scale: 1.2, ease: "bounce" }); gsap.to(this,{ duration: 1, rotation: 90, ease: "bounce", backgroundColor: "blue" }); }); </script>