Having trouble with tweening my camera position. I've set up a Codepen with minimal code to showcase the issue, complete with annotations and plenty of console.log() statements for debugging purposes.
The starting point of my camera position is:
camera.position.z = 30;
My first tween, tween001:
var tween001 = gsap.to(camera.position,{ delay:2, duration:5, z:60, onUpdate:function(){
camera.updateProjectionMatrix();
console.log("play");
}, onComplete:function(){console.log("complete");}, ease:"elastic"});
So, this tween moves the camera from z=30 to z=60. It works perfectly, but...
If the user interacts with the 3D scene (move, over, click), it triggers an event listener which pauses the tween using "tween001.pause()". I want the tween to use the current camera position when it resumes, rather than the position it had when the tween was initially triggered.
This is because when tween001 is played again or resumed from a pause, it starts from the default position x=0, y=0, z=30.
An idle function is in place to play tween001 again:
window.setInterval(checkTime, 1000); // Check the time every 1 second
function checkTime() {
if (idlecounter < timeout) { // Increment the counter every second until timeout
idlecounter++;
} else if (idlecounter == timeout) { // When timeout is reached, play tween001 again
tween001.play();
console.log('timeout');
}
}