How can I achieve smooth camera movement?

Questions
#1

I have implemented the ability to focus on different models by double clicking on them:

function ondblclick(event){
    pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( pointer, camera );
    const intersects = raycaster.intersectObjects( scene.children );

    if(intersects.length > 0) {
        var pos = new THREE.Vector3();
        intersects[0].object.getWorldPosition(pos);
        controls.target = pos;
    }
}

It work fine, but the movement is instant so it looks and feel bad. What I want is for camera to slowly fly to the new position, instead of teleporting there. I know about the existence of lerp, but I’m very confused about how to use it.

#2

You can use gsap to easily implement complex and smooth animations.

npm i --save gsap

Code looks similar to this:

import gsap from 'gsap';

// ...

gsap.to(camera.position, {z: 5, duration: 3});

// ...

This would move the camera from z=currentPos to z=5 in 3 seconds.