Hello, i am kind of new to the whole R3F world so please go easy on me 
So i am working on a project. It consists a 3d map with annotations, and it has 3 clickable locations. For starters, i am using gsap timeline to showcase all 3 locations through animating the camera around the specific locations. But when i shift the camera.lookAt() to another position, its held abruptly, no smooth animation is held, it just looks at the new Vector3 point instantly. I dont use orbit controls.
How can i use gsap to target a new position, and animate it in a sense of “from to” smoothly and not instantly?
import { PerspectiveCamera } from '@react-three/drei'
import * as THREE from 'three'
import React, { useEffect, useRef, useState } from 'react'
import { useFrame, useThree } from '@react-three/fiber';
import gsap from 'gsap';
const CameraModule = () => {
const { camera } = useThree();
let tl = gsap.timeline();
useEffect(() => {
//initial position of camera is (0,50,0)
tl.to(camera.position, {
x: 25,
y: 25,
z: 25,
duration: 3,
ease: "power1.inOut",
onUpdate: function () {
camera.lookAt(new THREE.Vector3(0, 0, 0))
},
//showcasing 1st view
}).to(camera.position, {
x: -25,
y: 25,
z: 25,
duration: 10,
ease: "power1.inOut",
onUpdate: function () {
camera.lookAt(new THREE.Vector3(0, 0, 0))
},
//going to 2nd view
}).to(camera.position, {
x: 80,
y:30,
z: 20,
duration: 5,
onUpdate: function(){
camera.lookAt(new THREE.Vector3(100,14,0))
}
})
}, [camera])
return (
<>
<PerspectiveCamera far={40000} near={0.1} ref={camera} position={[0, 150, 150]} makeDefault fov={70} />
</>
)
}
export default CameraModule
The animation of the camera shifting position towards the 2nd view is fine, but shifting view (target) is not smooth. Any idea on how to manipulate camera target in gsap?
please and thank you in advance 