reverse() Functionality Question

[elegantseagulls]

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

[PointC]

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.

 

[Shaun Gorneau]

I would just simply find its progress ... if 0 play it, if greater than 0 reverse it.

 

See the Pen eJJxRR by sgorneau (@sgorneau) on CodePen

[elegantseagulls]

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!

Ryan

[PointC]

CSS transitions? What are those?   

 

 

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