Animate 'real' translateZ property

Questions
1

Hi guys so I am looking for a way to animate translateZ ( i use gsap also but doesn’t have to be gsap but probably prefered as the rest of my animations use it).

What i’m trying to do…
so I am trying to have my character face the enemy character on a collision then rotate the player to the opposite rotation of the enemy so its basically facing the opposite way to the enemy character so the player can be repelled backwards when its hit from the enemy…

Where im up to…
so I have managed to do it all basically and it works just fine but without animation:

 const dirToPlayer = this._FindPlayer();
 const controlObject = object;
       const controlObject2 = this._target;
 
 
 
      const _R = controlObject.quaternion.clone();
 
      const m = new THREE.Matrix4();
      m.lookAt(
          new THREE.Vector3(0, 0, 0),
          dirToPlayer.negate(),
          new THREE.Vector3(0, 1, 0));
      _R.setFromRotationMatrix(m);
  
      controlObject.quaternion.copy(_R);
    // console.log(dir);
               controlObject.translateZ( -10 );

now im not strong in three nor gsap
so here’s what i did to try and animate translateZ:

let position = new THREE.Vector3();
object.getWorldPosition(position);   
position.add(new THREE.Vector3(0, 0, -10)); 

  gsap.to(object.position, { 
duration: 0.6,  z: position.z,
 onUpdate: function() {
 },
});

the above will work but only goes along the positive z axis so sometimes it gets pushed forwards rather than back …

So what i really need is to animate the TRUE translateZ property any idea’s?

thanks

2

/cc

3

this seems to work:

var ten = {value: 0};

  gsap.to((object.translateZ(ten.value), ten), { 
duration: 0.6,  value: -10,
 onUpdate: function() {
     object.translateZ(ten.value);
      },
});   
 console.log(object.translateZ(ten.value));