Jump to content
Search Community

reverse() Functionality Question

elegantseagulls
Moderator Tag

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

elegantseagulls
Posted

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.

  • Solution
Posted

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
Shaun Gorneau
Posted

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.

  • Like 2
elegantseagulls
Posted

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

  • Like 1
Posted

CSS transitions? What are those?  :-P 

 

 

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

  • Like 1

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...