Animate ‘real’ translateZ property

[UI UNICORN]

 

 

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

[UI UNICORN]

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));

 

[GSAP Helper]

Sure, that's one way to do it. If you still need some help, please provide a minimal demo (like a CodePen) so we can quickly fork that and show an alternative. It's always best to provide a minimal demo so that we can see the issue in context and tinker effectively. 👍

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use.