Jump to content
Search Community

Play different hover timelines — mouseenter/mouseleave

limbo test
Moderator Tag

Recommended Posts



I've stared at this for far too long. Seems simple enough to get it to this point but can't get it over the line... How would you reset a hover animation once it's completed (onmouseLeave)? Took me a bit of headscratching to get it to a point where I could run the animation on any given link (native forEach method - ALL the other similar examples I could find were using jQuery)...


But this little issue is stumping me... I've tried resetting via "clearProps" but could't get it working as expected.  The production site timeline is a fair bit more complex than this but wanted to keep the example as simple as possible.


Any help/pointers would be appreciated. Ta.

(updated with final code)


See the Pen MWJQBRE by liamcrean (@liamcrean) on CodePen

Link to comment
Share on other sites

thanks for the clear demo.


firing different animations on mouseenter / mouseleave can cause some interesting logic issues and un-desirable results if not planned properly.

things get can "jumpy" if you enter and leave quickly making the leave animation fire before the enter animation is finished.

in this simplistic animation its not much of an issue as the animations are pretty quick.


in your demo the solution is just to use restart() instead of play() on each event. When an animation's playhead gets to the end of the animation calling play() again does not play from a time of 0, you need restart() or play(0).


See the Pen oNBEQQJ?editors=0010 by snorkltv (@snorkltv) on CodePen

  • Like 2
Link to comment
Share on other sites

in the past I've done things where on mouseleave I check the progress() of the mouseenter animation. If it isn't complete (progress() <1) i just reverse() the enter animation. then you get into the situation where you have to decide what do you do if the mouseleave animation is playing and they quickly do a mouseenter? More conditional logic?  (see mega mess below)


for me, I've found its often much more trouble than it's worth to get 2 distinct, pre-created,  over/out animations to play nice.


another approach is that you create animations on demand; each time you enter or leave you call a function (that you wrote) that creates a new animation that animates to whatever values you want from whatever they are now.  With your animation you are changing the transformOrigin on each animation which will cause a nasty jump if you interrupt your animations. in the example below I removed the different transformOrigins and used a simpler approach just changing the xPercent of the span (for demonstration purposes)


See the Pen bGgLOJL?editors=0010 by snorkltv (@snorkltv) on CodePen


an issue with this approach is that you can get into trouble with longer durations. Set the default duration (first line) to 2 and play with it.

if you let the enter animation play for 1.5 seconds and then roll off then your mouse leave animation will also be 2 seconds and will feel VERY weird as the span has to move a short distance in a long amount of time.

also if you use a power4.inOut on both tweens you get undesirable results if you interrupt the intro animation.


As you can see with the current setup it works pretty well with zippy durations for the exit animation and no easing.


Mega mess


Another approach is you put all your animations in one timeline. after the intro animations play you pause the animation with addPause() and after that you have your leave animations. for the sake of clarity let's say the enter animation ends at time(2) and that's where your leave animations begin.


you then write a ton of conditional logic to handle a mouse enter or leave at any time. 


  • if mouse enter happens before time(2) you play the timeline
  • if mouse leave happens before time(2) you reverse the timeline OR maybe play it super fast to the end.
  • if mouse leave happens at time(2) or greater you play the timeline (exit animation)
  • if mouse enter happens after time(2) while exit animation is playing you restart the timeline

Unfortunately it's not the type of thing I can just put together now, but maybe it's clear enough for you to try.

Again, perhaps more trouble than it's worth for most over/out animations. The good news is the GSAP API is loaded with enough hooks that literally anything is possible.




  • Like 3
Link to comment
Share on other sites

Thanks for the excellent replies @Carl & @mikel — one or either should help shore up this job.


It's for a very specific control of an index page including image mask  and splittext animation — so having a nice back-up method to help predict / and or / trigger slicker results will be ideal. Can use my original method for text links where the outcome isn't as important (underline moving in from left and out right onleave).


ta :)

Link to comment
Share on other sites

Hi @limbo


After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution.


I made a video that premieres pretty much now...


Here are some demos



See the Pen MWJVWwy by snorkltv (@snorkltv) on CodePen


More Complex

See the Pen 12598b629fa6d41468fdc8e60ee896ba by snorkltv (@snorkltv) on CodePen



See the Pen MWJVYeQ?editors=0010 by snorkltv (@snorkltv) on CodePen





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

@Carl - thanks for the explaination video/examples. It's very helpful to see it broken down like that. Nice.


@OSUblake - thanks too. Great to see the different approaches.


Both approaches really help to highlight scenario/state based transitions/timelines and the logic needed to corral mouse events. Good stuff.

  • Like 1
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.
  • Create New...