feat: integrate GSAP for object animations and update package dependencies

package.json

@@ -12,6 +12,7 @@
     "vite-plugin-restart": "^0.4.2"
   },
   "dependencies": {
+    "gsap": "~3.12.7",
     "three": "^0.174.0"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      gsap:
+        specifier: ~3.12.7
+        version: 3.12.7
       three:
         specifier: ^0.174.0
         version: 0.174.0
@@ -352,6 +355,9 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  [email protected]:
+    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
+
   [email protected]:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -649,6 +655,8 @@ snapshots:
   [email protected]:
     optional: true
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:

src/script.js

@@ -1,5 +1,6 @@
 import './style.css'
 import * as THREE from 'three'
+import gsap from 'gsap'
 
 // Canvas
 const canvas = document.querySelector('canvas.webgl')
@@ -31,19 +32,22 @@ const renderer = new THREE.WebGLRenderer({
 renderer.setSize(sizes.width, sizes.height)
 
 // Clock
-const clock = new THREE.Clock()
+// const clock = new THREE.Clock()
+gsap.to(mesh.position, { x: 2, duration: 1, delay: 1})
+gsap.to(mesh.position, { x: 0, duration: 1, delay: 2})
 
 
 // Animations
 const tick = () => {
 
-    // Clock
+    // // Clock
-    const elapsedTime = clock.getElapsedTime()
+    // const elapsedTime = clock.getElapsedTime()
 
-    // Update objects
+    // // Update objects
-    mesh.rotation.y = elapsedTime * Math.PI * 2
+    // mesh.rotation.y = elapsedTime * Math.PI * 2
-    mesh.position.y = Math.sin(elapsedTime)
+    // mesh.position.y = Math.sin(elapsedTime)
-    mesh.position.x = Math.cos(elapsedTime)
+    // mesh.position.x = Math.cos(elapsedTime)
+    // camera.lookAt(mesh.position)
     
     // Renderer
     renderer.render(scene, camera)