[Three.js and Gsap tween update]

Hi !

I have a problem for tweening my camera . I create a codepen with the minimum of code just to reproduce my issue and I annotate all my code (sorry for my English I'm french by the way ^^ ) I also put a lot of console.log() for debugging purpose .

the question is at line 75-122

 

the start point is my camera.postion line 23 : 

 

camera.position.z = 30;

and my tween001 line 75 :

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 the tween is about to move my camera from the Z = 30 to Z = 60 

 

its work perfectly but ... When the user move the camera(line 90: when the user move/over/click on the 3d its fire and eventlistener that pause "tween001.pause()"  )  I want the tween001 use the "actual" camera.postion and not when the camera.postion used when the tween 001 get fire .

 Cause when the tween001 is played again or it resume from a pause the start point used is the default one x=0 y=0 z=30 .

An idle function  play the tween001 again at line 109

window.setInterval(checkTime, 1000);// every 1 second lauch checktime

  function checkTime() { //idleCounter get 1 every second and at 5 second coz timeout is 5 checktime relauch the tween001
    if (idlecounter < timeout) {
      idlecounter++;

      //console.log("++ ");
    } else if (idlecounter == timeout) {
      tween001.play();
      console.log('timeout');
    }
  }

 

Any help will be welcome 

 

See the Pen PoNjVvL?editors=0011 by cid-wings-the-encoder (@cid-wings-the-encoder) on CodePen