gsap.to(...) .reverse();

[hellenson]

Hello,

I've made this animation a long time ago, and please, ignore how it looks, and I have an animation similar to this on a website, but I can't figure out why is there the ".reverse()" after gsap.to. It work just as I want it to, but I need to know how to explain everything, but I just don't know. The only thing that comes to mind, is that it "prepares" the function to be reversed after mouseleave.

Thanks anyone in advance

See the Pen yyLOjGd by Helena-Pacltov- (@Helena-Pacltov-) on CodePen.

[hellenson]

Well I might have just came up with my own answer... Is it that it sets the animation in "reverse" or into the original state, so that it is played only after the mouseenter?

[mvaneijgen]

This is for your t.reversed(!t.reversed()); f.reversed(!f.reversed()) logic, you set the reversed state to true, so that is plays forward on mouse enter and in reverse on mouse leave.

 

I would do the same by setting the reversed property on the tween it self, makes it more readable in my opinion. 

 

Hope it helps and happy tweening! 

 

See the Pen GggNOZg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[hellenson]

@mvaneijgen Okay, that looks much better and makes more sense! Thank you very much :))