Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
msolari

Reverse Tween to Original Position

Recommended Posts

Hi all,

 

I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this? Will they work together in this context/is there a way to do this with just TweenMax/am I stuck in the woods?

 

The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether.

 

I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but that hasn't worked either. You can see my attempt in the pen.

 

Any tips?

 

Thanks in advance!

See the Pen ZawzeG by msolaridesign (@msolaridesign) on CodePen

Link to comment
Share on other sites

10 hours ago, msolari said:

I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this?

 

I don't know what you've been reading, but you can reverse TweenLite, TweenMax, TimelineLite and TimelineMax instances.

 

10 hours ago, msolari said:

The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether.

 

I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but that hasn't worked either. You can see my attempt in the pen.

 

It sounds like you might be expecting GSAP to behave more like a CSS animation. GSAP animations are not based on the original values of an element, like what's defined in a style sheet. 

 

When you create an animation, it will record the start and end values to animate between. Unless you're using something like a fromTo tween, the start values are going to be based on the object's current state. So if you create an animation and immediately reverse it, you're telling the animation to go back to the start values it just recorded, which is why it stops. The object is already at those starting values.

 

So to reverse an animation, you should create it outside your event handler. 

 

See the Pen aVXOLp by osublake (@osublake) on CodePen

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

You're an absolute legend, works great. I'm starting to get the hang of this I think. Greensock is really a game changer, and as I am finding out this community is great too. Thanks so much @OSUblake!

 

No more using plugins for me!

  • Like 4
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.
×