Jump to content


reverse() Functionality Question

Go to solution Solved by PointC,

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

Hi All, 


I'm trying to get an element to reverse its animation once it's clicked a second time. I'm using GSAP to add and remove classes (to it, and other elements), as a way to start the initiate the animation. I've not uses reverse before, but have looked at other examples and documentation and can't see what I'm doing wrong. It seems like I'm overlooking something pretty simple.


See the Pen QyyzVX by ryan_labar (@ryan_labar) on CodePen


Any thoughts?

See the Pen by QyyzVX (@QyyzVX) on CodePen

Link to comment
Share on other sites

  • Solution

Hi elegantseagulls  :),


You wouldn't really need the classes. You can just check if the timeline is reversed and play if it is and reverse the play if it isn't.


See the Pen jWWdWb by PointC (@PointC) on CodePen


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Hi @PointC and @Shaun Gorneau, 


Thanks for the timely responses! Both answers are great. I think I was just over complicating as I'm used to adding classes for CSS transition Hamburger Menus!


Have a great day!


  • Like 1
Link to comment
Share on other sites

CSS transitions? What are those?  :-P 



Happy to help. I'm glad you found a solution. :) 

  • Like 1
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.