I created a looping tween using Greensock javascript and I got it to loop using a function, maybe this is not the best way to loop, if you know a better way please advice, but basically when I try to kill the tween using this method, it doesn't work.

My code:

var dvdTween;
function playDVD()
{
 dvdTween = TweenMax.to($("#bigDVD"), 4, {css:{rotation:+1440, transformOrigin:"150px 150px"},ease:Expo.easeNone, delay:7, onComplete:playDVD});
}

/// Later in a function I call

dvdTween.kill(); /// but this does nothing. 

Again, there may be a better way to loop a tween, and this may be my issue, but as of now this tween keeps on calling the function after I "kill" it.

Thanks for your tips and help.

I created a looping tween using Greensock javascript and I got it to loop using a function, maybe this is not the best way to loop, if you know a better way please advice, but basically when I try to kill the tween using this method, it doesn't work.

My code:

var dvdTween;
function playDVD()
{
 dvdTween = TweenMax.to($("#bigDVD"), 4, {css:{rotation:+1440, transformOrigin:"150px 150px"},ease:Expo.easeNone, delay:7, onComplete:playDVD});
}

/// Later in a function I call

dvdTween.kill(); /// but this does nothing. 

Again, there may be a better way to loop a tween, and this may be my issue, but as of now this tween keeps on calling the function after I "kill" it.

Thanks for your tips and help.

• javascript
• tween
• gsap

1 Answer 1

Your code should indeed work - I'd love to see an example set of files that shows it not working. I wonder if you're running into a scope issue or something - are you sure "dvdTween" is referencing the tween in the context you're calling it? Try adding onCompleteScope:this to your tween.

Two other tips:

1) You can loop a TweenMax infinitely by setting repeat:-1, like:

TweenMax.to($("#bigDVD"), 4, {css:{rotation:1440}, repeat:-1}); 

2) You can kill all the tweens of a particular object using TweenMax.killTweensOf() like:

TweenMax.killTweensOf($("#bigDVD"));