Jump to content
GreenSock

dghez

Hover animation - let finish the animation on mouseleave

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone, 

in simple words here is what I'm trying to achieve:

  1. Start an infinite animation when the user hover a div
  2. Pause the animation when the user leave, but after the animation is completed.

I recreated a codepen as you can see, when I go out of the svg, the animation goes to the end but after it doesn't start anymore.

 

ps: I tried to add play(0) but it will play once (probably because of the callback onRepeat)

 

 

EDIT:

while posting I had an idea and looks like it works :)
I just remove the onRepeat callback on the mouseEnter in this way:

$("svg").hover(function() {
hoverDog.play();
hoverDog.eventCallback("onRepeat", function(){});
}, function() {
hoverDog.eventCallback("onRepeat", function(){ hoverDog.pause();});
});

See the Pen NNMaeK by anon (@anon) on CodePen

  • Like 2
Link to comment
Share on other sites

  • Solution

Thanks for the demo.

 

I have to congratulate you on a very clever solution!

 

The only thing I would add is that you can just pass in null instead of an empty function.

 

$("svg").hover(function() {
hoverDog.play();
hoverDog.eventCallback("onRepeat", null);
}, function() {
hoverDog.eventCallback("onRepeat", function(){ hoverDog.pause();});
});
Great job!
  • Like 3
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.
×