Jump to content


Can't handle tween-killing on mouseout...

Moderator Tag

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

I just can't come up with a way to cancel the tween and / or make it back to default onComplete. (clearProps didn't help..)


The codepen ist just a simplified example. I will have a more complex animation on mouse out. 

Goal is: canceling the mouseOut tween when the mouse enters before the tween has finished.


I'm eager to see how the elders do it.


The pen should say it all ...





PS: I bet Blake will be the fastest to answer. :>

See the Pen KmweOm by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

Another option: just add this to your hover (mouseover):

TweenLite.set(".jimbo", {clearProps:"all"});
Link to comment
Share on other sites

Insane how quick you guys are. Thank you very much.


Would you say it's generally better to store the Tweens in variables to keep track of them?

I thought a Tween deletes itself anyway after finishing (without repeat etc.)


Now I'm curious; Blake: how would you approach the situation when there was an mouseover animation aswell? 

Link to comment
Share on other sites

Animations aren't deleted in the sense you're probably thinking. GSAP deletes its reference to the animation. The actual deletion from memory is done automatically by the browser when it finds an object with no references to it.


A little background. When you create an object, it's not stored in the variable. The variable stores a reference to object, which is kind of like the home address of the object.

// foo and bar reference the same object
var foo = { value: 0 };
var bar = foo;

To be able to remove that object from memory, you would first need to clear out anything holding a reference to that object. The browser will then be able to remove it.

foo = null;
bar = null;

So as long as you keep a reference to animation, it should always be there. But of course you should always cleanup after yourself if you're not going to use an animation anymore.

var myAnimation = TweenLite.to(foo, 1, { x: 100 });

// Later on
myAnimation = null;

Should you keep track of them? It depends. In general, my advise would be the same thing I do for jQuery variables. If there's a good chance I'm going to reference it more than once, then yes. 


Link to comment
Share on other sites

For a mouse move animation, it depends on what you're trying to do, but I would do them same way I would do a scrolling animation. Because a mouse move event fires constantly, just like a scroll event, I would throttle any changes to animation frame requests. 


So here's an example. The move animation is interpolated, based on the position of the mouse. The rotate animation will be triggered if it's not already running.

See the Pen BRyGbd?editors=0010 by osublake (@osublake) on CodePen



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