Pause time in Tween.js

Question

I've been trying to implement a global pause for all tweens. If in my animate loop I just don't update TWEEN, it stops but then after I unpause jumps ahead to the position it should have as if I never paused.

TWEEN.update(time);

To tackle this I want to have a separate timeline as an argument of update function. I've tried to create a different value and update it independently, but then the tween won't start at all.

Answer 1

So here's the thing that ended up working, wondering if there is a more elegant way to do it using Tween's internal variables like elapsed.

var delta = 0;
var tmp = 0;
var recorded = false;

function animate(timestamp) {
 if(paused){
   if(!recorded) {
     tmp=timestamp;
     recorded=true;
   }
 } 
 else {
   if(recorded){
     delta += timestamp-tmp;
     recorded=false;
   }
   TWEEN.update(timestamp-delta);
}

Answer 2

Keep the time in TWEEN.update(time) will pause the tween. @Eugene was right.

1. cache the pause times;
2. TWEEN.update(timenow - pause times).

For more detail, see:

https://github.com/tweenjs/tween.js/issues/341#issuecomment-447653541

Answer 3

Today i have written little code, that can help you with pause for your tweens.

//First you need set some id for your tween animation.
var myTween = createjs.Tween.get(your_object).to({your_animation_params} ...);

//When you need to paused your tween by some event
//just get this object and set it on the same coordinates(by example),
//with time animation = 0 to have accses to use Pause method
c.Tween.get(your_object).to({x:your_object.x}, 0).pause(myTween);

//Later you can just play(unpause) it again using same trick
c.Tween.get(your_object).to({x:your_object.x}, 0).play(myTween);