Tween.js Not Calling OnUpdate Function

I am using tweenjs and Typescript to change the x and y coordinates of a three.js cube. I created the following tween to change the x position of an item of class 'FallingItem'. t

Solution 1:

I had a similar case when TWEEN was not calling my onUpdate function. Found out I had to call window.requestAnimationFrame() in order to tell the browser that I, i.e. TWEEN, "want to perform an animation and requests that the browser call a specified function to update an animation before the next repaint."

function animate(time) {
    window.requestAnimationFrame(animate);
    TWEEN.update(time);
}

new TWEEN
        .Tween({ y: 0 })
        .to({y: 1000}, 700)
        .easing(TWEEN.Easing.Exponential.InOut)
        .onUpdate(function () {
            window.scrollTo(0, this.y);
        })
        .start();

animate();

The above example was taken from https://github.com/tweenjs/tween.js/blob/master/examples/00_hello_world.html.

Solution 2:

Tween.js needs to be passed the elapsed time, not a delta time. Passing a running elapsed time fixed the problem.

Also, it's supposed to be passed an object containing the value you want interpolated. It looks like passing the value itself doesn't work. I had success with this:

let tweenElement = {
                x: this.tweenInfo.pos.x,
                y: this.tweenInfo.pos.y,
                item: this
            }

this.tweenInfo.tweenUp = new TWEEN.Tween(tweenElement)
                .to({y : this.tweenInfo.newPos.y}
                    , this.tweenInfo.movementTime * 0.5 * 1000)
                .easing( TWEEN.Easing.Cubic.InOut )
                .onUpdate(function(){
                    this.item.updateYPos(tweenElement, this)
                })
                .onComplete(function(){
                    this.item.tweenUpComplete();
                });