javascripttypescripttweentween.jstweenjs

Tween.js not chaining properly

I'm trying to use tween.js to chain some animations, however I find it is not working properly.

var car={position:{x:100}};

var tween1 = new TWEEN.Tween(car.position)
.to({x: 105}, 1000).onComplete(() => {console.log("done 1 second")}); 
var tween2 = new TWEEN.Tween(car.position)
.to({x: 110}, 1000).onComplete(() => {console.log("done 2 second")}); 
var tween3 = new TWEEN.Tween(car.position)
.to({x: 115}, 1000).onComplete(() => {console.log("done 3 second")}); 

tween1.chain(tween2).chain(tween3).start()

setTimeout(() => {
    console.log(1);
},1000);
setTimeout(() => {
    console.log(2);
}, 2000);
setTimeout(() => {
    console.log(3);
}, 3000);

function animate() {
TWEEN.update();
window.requestAnimationFrame(animate);
}
animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>

And for each of the 3 tweens to take exactly 1 second. But somehow the library is merging tweens after the first....

http://jsfiddle.net/6gfkenw2/

Does anyone know how to fix this?

Solution

  • No expert here, but it seems like you need to chain tween3 to tween2 before chaining that to tween1

    So instead off

    tween1.chain(tween2).chain(tween3).start()

    Use

    tween1.chain(tween2.chain(tween3)).start()

    So the output becomes

    1
done 1 second
2
done 2 second
3
done 3 second


    var car={position:{x:100}};

var tween1 = new TWEEN.Tween(car.position)
.to({x: 105}, 1000).onComplete(() => {console.log("done 1 second")}); 
var tween2 = new TWEEN.Tween(car.position)
.to({x: 110}, 1000).onComplete(() => {console.log("done 2 second")}); 
var tween3 = new TWEEN.Tween(car.position)
.to({x: 115}, 1000).onComplete(() => {console.log("done 3 second")}); 

tween1.chain(tween2.chain(tween3)).start()

setTimeout(() => {
    console.log(1);
},1000);
setTimeout(() => {
    console.log(2);
}, 2000);
setTimeout(() => {
    console.log(3);
}, 3000);

function animate() {
TWEEN.update();
window.requestAnimationFrame(animate);
}
animate();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>