reverse Reverse event for two buttons?

[yarovikov 0 Likes (Newbie)]

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

[PointC 11,938 Likes (Superhero)]

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.

 

[yarovikov 0 Likes (Newbie)]

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

[Carl 9,895 Likes (Superhero)]

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.

 

[PointC 11,938 Likes (Superhero)]

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.

 

[yarovikov 0 Likes (Newbie)]

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!