Clear animation cache?

[Vincentccw]

How do you clear animation cache? When you hover over and our the elements few times you can see the animation continuing even if the function is not being call.

 

In jquery, I use:

e.g. $(this).stop().animate({opacity: 0}, 500);

 

but how about in GSAP?

[Jonathan]

Hello ... you could try any of the kill methods:

_________________________________________________________________

 

kill()

 

Kills the animation entirely or in part depending on the parameters.

 

http://api.greensock.com/js/com/greensock/core/Animation.html#kill()

//kill the entire animation:
myAnimation.kill();

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

_________________________________________________________________

 

killAll()

 

Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killAll()

//kill everything
TweenMax.killAll();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);

_________________________________________________________________

 

killChildTweensOf()

 

Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf()

<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
</div>
</div>
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});
//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );

_________________________________________________________________

 

killTweensOf()

 

Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

TweenMax.killTweensOf(myObject);

TweenMax.killTweensOf(myObject, {opacity:true, x:true});

_________________________________________________________________

 

 you could use any of the above GSAP methods to stop the animation which.. or kills the animation entirely or in part depending on the parameters and what method you use

[jamiejefferson]

Based on your other thread, I'll assume this is because you were appending all of your hover tweens to the same timeline one after another. Easiest solution would be to use TweenLite.to() instead of a timeline for that sort of thing since the queue is not needed or desired.

 

If you really need to use an animation queue like that, then Jonathan has you covered.

[Vincentccw]

Helloo ... you could try any of the kill methods:

...

Thanks for the detail explanation, it really works 

[Vincentccw]

Based on your other thread, I'll assume this is because you were appending all of your hover tweens to the same timeline one after another. Easiest solution would be to use TweenLite.to() instead of a timeline for that sort of thing since the queue is not needed or desired.

 

If you really need to use an animation queue like that, then Jonathan has you covered.

Thanks, I have fixed the problems