Hi Forum,
I'm working on a project using gsap and I have composed a svg UI, that when you click on the coloured buttons you activate a staggered tween of coloured circles, for example click green square and the green circles animate and so on. So far I have managed to use the, .isActive() method and the result is that of a toggle effect on each button, so only when the animation is completed you can click on the button again to reverse the animation.
Is there a way to disable the other buttons so the user doesn't activate the other animations at the same time? Or more importantly, click on one button to activate an animation, but when the user clicks on another button it reverses the current animation and then plays the activated animation. So basically click on the green button and the green circles animates and then the user clicks on the red button, the green circles reverse and then the red circles animate.
I hope this makes sense.
Your help will be much appreciated.
Thank you.
Zahir