How to stop tween of element in CreateJS/TweenJS

Question

I have multiple Tweens in CreateJS/TweenJS:

createjs.Tween.get(elem1).to({..});
createjs.Tween.get(elem2).to({..});

In timeline, I need to stop one of Tweens. I tried:

var tween1 = createjs.Tween.get(elem1).to({..});
var tween2 = createjs.Tween.get(elem2).to({..});

and then:

tween1.setPaused(true);

But it's returns error that: .setPaused() is not a function.

How to stop one of Tweens that I need?

score 4 · Answer 1 · answered Oct 10 '17 at 11:59

4

You just need to remove the tween with createjs.Tween.removeTweens(elem)

See doc here: http://createjs.com/docs/tweenjs/classes/Tween.html#method_removeTweens

answered Oct 10 '17 at 11:59

jck

541
6
21

What if you remove the element itself? For example with `elem.remove()`? Would the associated Tween also be deleted? – Madhav Malhotra Dec 24 '21 at 23:09

score 3 · Accepted Answer · answered Jan 28 '16 at 16:26

Are you sure you are referencing the tween correctly?

Here is a quick sample I made to start/stop tweens using setPaused: http://jsfiddle.net/lannymcnie/cm2we3wk/

It creates tweens like this:

var tween1 = createjs.Tween.get(shape, {loop:true})
    .to({x:550}, 1000, createjs.Ease.quadOut)
    .to({x:50}, 1000, createjs.Ease.quadIn);

And then toggles them using setPaused:

// tween1 is passed in as the tween variable.
if (tween.paused) {
    tween.paused = false;
    tween.setPaused(false);
} else {
    tween.paused = true;
    tween.setPaused(true);
}

Thanks. problem in my case was that I was pausing tween while it was not started, because it's asynchronous function. — zur4ik, Jan 29 '16 at 12:06

How to stop tween of element in CreateJS/TweenJS

2 Answers2