Skip to content

Instantly share code, notes, and snippets.

@u10int
Forked from ektogamat/AnimateCamera.jsx
Created May 4, 2024 16:33
Show Gist options
  • Save u10int/7eb7776ea65d9a3267b76457c455fada to your computer and use it in GitHub Desktop.
Save u10int/7eb7776ea65d9a3267b76457c455fada to your computer and use it in GitHub Desktop.
useGSAP with React Three Fiber Camera Animation
import { useThree } from '@react-three/fiber'
import { gsap } from 'gsap'
import { useGSAP } from '@gsap/react'
export default function AnimateCamera() {
// Accessing camera from Three.js
const { camera } = useThree()
useGSAP(() => { // The new hook will take care of context and life cicle.
gsap.fromTo( // Creates the animation
camera.position, // The camera object from useThree
{ x: 0, z: 95 }, // Initial position
{x: 0, z: 35, // Final position
ease: 'power1.out', // Easing function
duration: 2, // Duration
onUpdate: () => {
camera.lookAt(0, 0, 0) // Look to a target during the animation
},
}
)
}, {}) //Dependencies, if you have
return <></> //Return an empty fragment
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment