how to enable damping without controls.update

Question

here is my code when i try to call controls.update() to enable damping all things messed up.i also try control.target but it's not working.if i don't call controls.update() all things work properly.can anyone tell me what should i do

// about direct
points.filter((data) => {
return data.projectDirect === 'aboutDirect'
}).map((projectDirect) => {
projectDirect.element.addEventListener('click', (e) => {

    controls.enableRotate = false;
    controls.enableZoom = false;
    controls.enablePan = false;
    e.stopPropagation();
    gsap.to(camera.position, {
      duration: 1.5,
      x: aboutCenter.x + 8,
      y: aboutCenter.y,
      z: aboutCenter.z,
      onUpdate: function () {
        camera.lookAt(aboutCenter);
      }
    });

})

//tick function

const clock = new THREE.Clock()
const tick = () =\> {
const elapsedTime = clock.getElapsedTime()
// controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()

Answer 1

Your code does not work since the result of camera.lookAt(aboutCenter); will be overwritten by controls.update(). Write your GSAP code like so:

gsap.to(controls.target, {
    duration: 1.5,
    x: aboutCenter.x + 8,
    y: aboutCenter.y,
    z: aboutCenter.z
});

And update the controls in the animation loop.