Three.js | Tween chain : How to start multiple tween's simultaneous?

Question

My code is :

function move(){

var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000).start();        
var B = new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000);       
var C = new TWEEN.Tween(meshC.position).to({ x: 10 }, 2000);    

A.chain(B);
B.chain(C);
C.chain(A);

animate();    
}

But, how to code if I want start multiple tween's simultaneous. (A and B move together then C).

Try with the https://github.com/CreateJS/TweenJS CreateJs Tween the advantage of this normal tween library with wrapper function. I used in my project this is cool — Ajit kohir, Apr 04 '16 at 17:15

score 5 · Accepted Answer · answered Apr 06 '16 at 09:43

To animate A and B together, then C :

function move(){

var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000)
.onStart(function(){
     new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000).start();
}).start();        
var C = new TWEEN.Tween(meshC.position).to({ x: 10 }, 2000);   
A.chain(C);
C.chain(A);
animate();
}

Et voilà !

Three.js | Tween chain : How to start multiple tween's simultaneous?

1 Answers1