From ced9c2b65a9ec29b300af012db3adc82d7384035 Mon Sep 17 00:00:00 2001
From: sayudhalw <mazaya.studio@outlook.com>
Date: Sun, 23 Aug 2026 20:43:55 +0700
Subject: [PATCH] feat: integrate GSAP for object animations and update package
 dependencies

---
 package.json   |  1 +
 pnpm-lock.yaml |  8 ++++++++
 src/script.js  | 18 +++++++++++-------
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 779dd82..5cdabd4 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "vite-plugin-restart": "^0.4.2"
   },
   "dependencies": {
+    "gsap": "~3.12.7",
     "three": "^0.174.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 526cf8e..f9acfc5 100644
--- a/pnpm-lock.yaml
+++ b/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]
 
+  gsap@3.12.7:
+    resolution: {integrity: sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -649,6 +655,8 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  gsap@3.12.7: {}
+
   is-number@7.0.0: {}
 
   micromatch@4.0.8:
diff --git a/src/script.js b/src/script.js
index 7e37dfe..4261ff2 100644
--- a/src/script.js
+++ b/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
-    const elapsedTime = clock.getElapsedTime()
+    // // Clock
+    // const elapsedTime = clock.getElapsedTime()
 
-    // Update objects
-    mesh.rotation.y = elapsedTime * Math.PI * 2
-    mesh.position.y = Math.sin(elapsedTime)
-    mesh.position.x = Math.cos(elapsedTime)
+    // // Update objects
+    // mesh.rotation.y = elapsedTime * Math.PI * 2
+    // mesh.position.y = Math.sin(elapsedTime)
+    // mesh.position.x = Math.cos(elapsedTime)
+    // camera.lookAt(mesh.position)
     
     // Renderer
     renderer.render(scene, camera)