Tween.JS - rotate and scale in sync
Hello, you wonderful Snap Lensing aficionados!
I'm currently building a lens where the user touches the mesh of an object and the object scales down to 0 and rotates while it happens (think: a shrinking tornado).
My problem is I can only get it to scale.
I'm admittedly a bit dense with tween.js and I've been trying to figure out how to synchronously get these to happen at the same time. Right now I'm essentially running the "scale" tween and trying to run the other tween inside of the "onStart" function, which seems to be correct according to this SO article:
https://stackoverflow.com/questions/36403726/three-js-tween-chain-how-to-start-multiple-tweens-simultaneous
I'm sure it's dead wrong, but I cant seem to figure this out...
Here it is:
var tween = new TWEEN.Tween(tweenStartScale)
.to(tweenGoalScale, script.time * 1000.0)
.easing(TWEEN.Easing.Quadratic.Out)
.onStart(function(){
//This seems to do nothing at all, but the "scale" tween does work, so this is firing.
newTWEEN.Tween(tweenStartRotation)
.to(tweenGoalRotation, script.time * 1000.0)
.easing(TWEEN.Easing.Quadratic.Out)
.start();
})
.onUpdate(function() {
updateScale(tweenStartScale);
})
.yoyo(false)
.repeat(0)
.start()
.onComplete(function() {
//unrelated stuff happening here
});
No errors in the log...
Any help would be greatly appreciated!! Thanks! Loving the lens development so far, used it in many projects...
Hey Luke!
Have you taken a look at the Lens Studio Tween package? It actually uses Tween.js to provide all easing functions on a variety of properties in the Lens Studio environment.
I recommend checking out the guide - it may make things a lot easier for you! Let me know if you have any questions.
Best,
Peter