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....
Does anyone know how to fix this?
No tween.js 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>