Jump to content
Search Community

Reverse event for two buttons?

yarovikov test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

  • Like 2
Link to comment
Share on other sites

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 comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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 comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...