Reverse Tween to Original Position

[rubybuilds]

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

[OSUblake]

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

 

 

[rubybuilds]

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!