Trouble using Tween.js library

Help & Support
1

Hey,
I’m trying to animate a model made up of different model parts. To do this I’ve found the playcanvas tween.js to be very helpfull. However when trying to reverse the tween nothing happens. The documentation I’ve found does not contain an example using this functionality. Am I using it wrong or do I have a syntax error? If anybody could take a look at this I would very grateful.

Basicly I have two tweens. One for the first part’s rotation and second for the second’s part rotation. Both run as expected but when calling ‘reverse()’ on the first tween upon ‘complete’ of the second nothing happens.

var handle = parts[1].tween(parts[1].getLocalEulerAngles()).rotate({x: 0, y: 0, z: -90}, 1.5, pc.SineInOut).start();
var wing = parts[0].tween(parts[0].getLocalEulerAngles()).rotate({x: 0, y: 75, z: 0}, 2.0, pc.SineInOut).delay(2).yoyo(true).repeat(2).start();
    wing.on('complete', function () {               
    handle.reverse();
});

The one fix I’ve found so far is redefining the first tween with opposite values. But this kinda defeats the purpose of the ‘reverse()’ function.

var handle = parts[1].tween(parts[1].getLocalEulerAngles()).rotate({x: 0, y: 0, z: -90}, 1.5, pc.SineInOut).start();
var wing = parts[0].tween(parts[0].getLocalEulerAngles()).rotate({x: 0, y: 75, z: 0}, 2.0, pc.SineInOut).delay(2).yoyo(true).repeat(2).start();
    wing.on('complete', function () {               
    parts[1].tween(parts[1].getLocalEulerAngles()).rotate({x: 0, y: 0, z: 0}, 1.5, pc.SineInOut).start();
});
2

Hi @Maarten_V,

Not sure what’s wrong here, does yoyo/repeat(2) work as expected on your 2nd tween?

Reverse I think internally sets a property to run time backwards, if your handle tween has finished executing then I think you will have to call start() again.

handle.reverse().start();

If you are still having trouble with this, try posting a sample project to take a look.

3

Hi @Leonidas,

Thank you for replying !

The 2nd tween, with yoyo().repeat(2), does work as expected. Complete event also fires correctly.

The handle tween is done (flag finished is set) so I tried calling start() after reverse(), but it made no difference.

I will try to make a sample project on a later date as I’m currently on a strict deadline.

1 Like