Play different hover timelines — mouseenter/mouseleave

[limbo]

Hello

 

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

[Carl]

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

[limbo]

Thanks. That works really well..  until you quickly move your mouse over the target trigger. Then the playback is ruined. Any catch all defence for this sort of mouse event?

[Carl]

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.

 

 

 

[mikel]

 

Hey @Carl, hey @limbo,

 

Full agreement: Anything is possible, but it should be worth the effort.
Nevertheless, here is another option: direction-aware hover

 

See the Pen wvoXbOK by mikeK (@mikeK) on CodePen

 

Happy hovering ...

Mikel

 

 

[Carl]

nice job, @mikel it's cool how different animations trigger from different directions.

[limbo]

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

[Carl]

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

 

Simple

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

 

More Complex

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

 

Multiple

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

 

Enjoy!

 

 

[OSUblake]

Here's how I've handled different enter and leave animations. Pretty simple, just keep track of whether it's hovering or not, and if an animation already exists. It shouldn't jump as every animation will play all the way through.

 

See the Pen dyZBqzr by GreenSock (@GreenSock) on CodePen

 

 

[limbo]

@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.