Zahir Rafiq Posted January 10, 2020 Share Posted January 10, 2020 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 See the Pen VwYxYgL by AlphaArt (@AlphaArt) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 10, 2020 Share Posted January 10, 2020 Hi @Zahir Rafiq, You could, in your click event, check the progress of your other timelines, and if it is greater than 0, reverse it back to 0, then use onReverseComplete in GSAP to trigger the play of the clicked icon, and if progress is 0 just play timeline as normal. 2 Link to comment Share on other sites More sharing options...
Zahir Rafiq Posted January 10, 2020 Author Share Posted January 10, 2020 Hi @elegantseagulls, How would I do this? I am pretty new to gsap. Can you show me an example please. Thanks Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 10, 2020 Share Posted January 10, 2020 Hi @Zahir Rafiq, This is simplified to two grids, but it'll give you a starting point. Also note: I'm using gsap3 syntax for it. See the Pen jOExVKX?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen 4 Link to comment Share on other sites More sharing options...
Zahir Rafiq Posted January 10, 2020 Author Share Posted January 10, 2020 Hi @elegantseagulls, Thank you so much for this:) Will give it a go. Zahir Link to comment Share on other sites More sharing options...
Zahir Rafiq Posted January 11, 2020 Author Share Posted January 11, 2020 Hi @elegantseagulls, I'm almost there with this project, it works fine when you click in the order from green, red and blue, but the problem is when you click in a different colour sequence , such as blue, red and green the animation does not function correctly. Essentially all I want is for the user to navigate through the animations in whatever order. I really appreciated your help last time. Zahir Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 11, 2020 Share Posted January 11, 2020 In order to keep your code DRY (don't repeat yourself), I would make use of the destructor assignment for the timelines and make your functions a little bit more generic so you can use the same one for each button: See the Pen xxbjaKW?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now