Share Posted March 25, 2019 Hi all. How can i make reverse for one element after click on different buttons? I need play/reverese onclick on div and button with same data-id See the Pen OqGgzb by anon (@anon) on CodePen Link to post Share on other sites
Share Posted March 25, 2019 There are many ways to make that work. You could name your timelines and play/reverse depending on some data attribute of the buttons. You could also loop though and use an index for each timeline that corresponds to the index of the buttons. You could also use an active timeline variable and if true, reverse it when another button is clicked. Just FYI, it's much easier to offer assistance when you provide a demo rather than a live site. More info: Happy tweening. 2 Link to post Share on other sites
Author Share Posted March 26, 2019 9 hours ago, PointC said: There are many ways to make that work. You could name your timelines and play/reverse depending on some data attribute of the buttons. You could also loop though and use an index for each timeline that corresponds to the index of the buttons. You could also use an active timeline variable and if true, reverse it when another button is clicked. codepen added Link to post Share on other sites
Share Posted March 26, 2019 Thanks for the demo. In general you just need to save a reference to the current animation and then each time you click something you tell the current animation to reverse. I did that in the demo below: See the Pen YgMROX?editors=0010 by GreenSock (@GreenSock) on CodePen Click a different green div or button each time. you will see that the current animation reverses while the newly selected timeline plays forward. However there is a big problem. If you click the same div or button in sequence things get messy. It appears your code is trying to be a bit too clever and concise. You are creating 6 timelines when you only need 3. You have 6 elements with a class of .part but you are only animating 3 things. You need to restructure your code a bit so that you are only creating 3 timelines. I would suggest putting each timeline in an array and then when you click on a div or button you find out what "its" timeline is based on its own index or attribute somehow. You need button1 and div1 to know to to control the first timeline the array. 3 Link to post Share on other sites
Share Posted March 26, 2019 I wasn't really sure if clicking any button would reverse the active timeline or multiple timelines could be active and each one would have two controls. In any case, here's a simple loop approach using an index and skips jQuery. See the Pen drLaRe by PointC (@PointC) on CodePen Maybe it'll help. Happy tweening. 2 Link to post Share on other sites
Author Share Posted March 26, 2019 2 minutes ago, PointC said: I wasn't really sure if clicking any button would reverse the active timeline or multiple timelines could be active and each one would have two controls. In any case, here's a simple loop approach using an index and skips jQuery. See the Pen drLaRe by PointC (@PointC) on CodePen Maybe it'll help. Happy tweening. oh nice! thanks! Link to post Share on other sites
