Hover animation questions. (with codepen)

[jesper.landberg]

Hi,

 

I'm trying to do a hover animation using GSAP. I could do this example using CSS but I'm going to add more to it later thus wanting to use JS/GSAP.

 

What I want to do:

 

If you just hover the btn quickly and leave immediately I want the enter animation to finish rather then being interupted and then I want the leave animation to fire when the enter animation is done. This works fine if I'm still hovering the btn after the enter animation is complete, but not if i leave the button before.

 

You understand?=)

See the Pen YWrNoA?editors=0010 by ReGGae (@ReGGae) on CodePen

[Jonathan]

Hello jesper.landberg,

 

Thank you for the example, very helpful !!

 

Please standby to give use time to test and offer solutions, Thanks!

 

In the mean while... you can proablly check if the tween isActive() the if it is do not trigger restart()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/

 

And then use the onComplete callback in your tween to trigger restart() for leave

 

Usually when doing a hover its best to just play() on mouseenter and then simply reverse() on mouseleave.

 

I see you are using to different timelines for the same button hover since the same thing will happen when hovering in and out. You can combine those timelines

 

Here are example of simple hover in and out using play() and reverse()

 

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

See the Pen obRyBr by jonathan (@jonathan) on CodePen

See the Pen NxVMBx by jonathan (@jonathan) on CodePen

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

See the Pen tukhf by jonathan (@jonathan) on CodePen

 

Hopefully these are helpful showing you the concept to use one timeline instance with play() on mouseenter and reverse() on mouseleave.

 

[Carl]

Great examples, Jonathan.

 

It seems Jesper may want a different animation (not just a reverse) on mouseleave.

 

In this demo, you will see that the if you rolloff quickly while the first animation is still playing, the first animation will complete and then the leave will play.

I allow this by adding an onComplete callback to the first animation if you rolloff before it is complete.

 

if you stay over the button for a long time, the reverse animation will not start until your roll out.

 

http://codepen.io/GreenSock/pen/pbBAVg?editors=0010

 

In the future, when providing reduced test cases, please resist using processors like Babel as it adds an extra level of obfuscation for some of us and it will make our response time slower. Thanks for understanding.

[jesper.landberg]

Great examples, Jonathan.

 

It seems Jesper may want a different animation (not just a reverse) on mouseleave.

 

In this demo, you will see that the if you rolloff quickly while the first animation is still playing, the first animation will complete and then the leave will play.

I allow this by adding an onComplete callback to the first animation if you rolloff before it is complete.

 

if you stay over the button for a long time, the reverse animation will not start until your roll out.

 

See the Pen pbBAVg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In the future, when providing reduced test cases, please resist using processors like Babel as it adds an extra level of obfuscation for some of us and it will make our response time slower. Thanks for understanding.

 

 

Hello jesper.landberg,

 

Thank you for the example, very helpful !!

 

Please standby to give use time to test and offer solutions, Thanks!

 

In the mean while... you can proablly check if the tween isActive() the if it is do not trigger restart()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/

 

And then use the onComplete callback in your tween to trigger restart() for leave

 

Usually when doing a hover its best to just play() on mouseenter and then simply reverse() on mouseleave.

 

I see you are using to different timelines for the same button hover since the same thing will happen when hovering in and out. You can combine those timelines

 

Here are example of simple hover in and out using play() and reverse()

 

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

See the Pen obRyBr by jonathan (@jonathan) on CodePen

See the Pen NxVMBx by jonathan (@jonathan) on CodePen

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

See the Pen tukhf by jonathan (@jonathan) on CodePen

 

Hopefully these are helpful showing you the concept to use one timeline instance with play() on mouseenter and reverse() on mouseleave.

 

 

Thanks for the great examples both of you, my problem is solved=)