From d2136b34b029beedd4c0da410b5b261233e432a1 Mon Sep 17 00:00:00 2001
From: Hamza Mubin <hamzamubeen182@gmail.com>
Date: Thu, 7 Nov 2024 14:24:56 +0530
Subject: [PATCH]  added gsap to each product

---
 gsap.js           | 42 ++++++++++++++++++++++++++++++++++++++++++
 index.html        | 10 +++++++---
 package-lock.json |  6 ++++++
 style.css         |  2 ++
 4 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 gsap.js
 create mode 100644 package-lock.json

diff --git a/gsap.js b/gsap.js
new file mode 100644
index 00000000..9db93976
--- /dev/null
+++ b/gsap.js
@@ -0,0 +1,42 @@
+gsap.registerPlugin(ScrollTrigger);
+
+// Select all product containers
+document.querySelectorAll(".col-2").forEach((product) => {
+  
+  
+  gsap.fromTo(
+    product.querySelector(".color-box"), 
+    {  rotation: 90,opacity:0 }, 
+    { 
+        opacity:1,  
+      rotation: 0, 
+      duration:0.3,
+      ease: "power2.out",
+      scrollTrigger: {
+        trigger: product,
+        start: "top 80%",   
+        end: "top 70%",
+        
+        scrub: true
+      }
+    }
+  );
+
+  // Animation for the controller image in each product
+  gsap.fromTo(
+    product.querySelector(".controller"), 
+    { scale: 0.1, opacity: 0, },  // Initial state
+    { 
+      scale: 1, 
+      opacity: 1,
+      duration: 0.3,
+      ease: "back.out(1.7)", 
+      scrollTrigger: {
+        trigger: product,
+        start: "top 80%",   // Customize to control when each product animates
+        end: "top 70%",
+        scrub: true
+      }
+    }
+  );
+});
diff --git a/index.html b/index.html
index 7900891d..c62bef01 100644
--- a/index.html
+++ b/index.html
@@ -417,6 +417,10 @@ <h3>Ergonomic Gaming Chair</h3>
         </div>
     </div>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
+    <script src="./gsap.js"></script>
+
     <div class="most-loved-products">
         <h2>Our Most Loved Products</h2>
         <div class="product-slider">
@@ -638,9 +642,9 @@ <h2>Contact Our Customer Support Team</h2>
             </div>
         </div>
     </section>
-
-
-    <footer class="footer">
+ 
+    
+    <footer class="footer">  
         <div class="footer-content">
             <div class="footer-section about">
                 <div class="logo-container">
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..791d487f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Collect-your-GamingTools",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/style.css b/style.css
index 038be2e1..cc4bbe85 100644
--- a/style.css
+++ b/style.css
@@ -201,6 +201,8 @@ button[type="submit"]:hover {
   z-index: 9999;
 }
 
+
+
 #progressBar {
   height: 100%;
   width: 0%;