Merge pull request #89 from Sapta-Dev27/New-Branch

Issue #29 solved
dohinaf · Oct 2, 2024 · ab8bfad · ab8bfad
2 parents 8f2d579 + 86f6f94
commit ab8bfad
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -12,6 +12,8 @@
 
     <!-- Custom CSS -->
     <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+
 </head>
 
 <body>
@@ -248,6 +250,42 @@ <h3> Never settle for just one scoop</h3><br><br>
 
     <!-- JavaScript File -->
     <script src="script.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+
+
+
+
+
+            // Animate the search form
+            gsap.from(".search-form", { opacity: 0, x: -100, duration: 1, ease: "power2.out" });
+
+            // Animate the cart container
+            gsap.from(".cart-items-container", { opacity: 0, y: 100, duration: 1.5, ease: "power2.out" });
+
+            // Animate the 'My Order' container
+            gsap.from(".my-order-container", { opacity: 0, x: 100, duration: 1.5, ease: "power2.out" });
+
+            // Animate home section content
+            gsap.from(".home .content h3", { opacity: 0, x: -100, duration: 1.5, delay :0.1, ease: "power2.out" });
+            gsap.from(".home .content p", { opacity: 0, x: -100, duration: 1.5, delay: 0.1, ease: "power2.out" });
+            gsap.from(".home .animated-button", { opacity: 0, x: -100, duration: 1.5, delay: 0.1, ease: "power2.out" });
+
+            // Animate buttons on hover for scaling effect
+            const buttons = document.querySelectorAll("button");
+            buttons.forEach(button => {
+                button.addEventListener('mouseover', () => {
+                    gsap.to(button, { scale: 1.1, duration: 0.2 });
+                });
+                button.addEventListener('mouseout', () => {
+                    gsap.to(button, { scale: 1, duration: 0.2 });
+                });
+            });
+
+        });
+    </script>
+
+
 
 </body>
 

diff --git a/script.js b/script.js
@@ -188,4 +188,5 @@ function editOrder() {
         alert('Your order has been cleared. You can now add new items.');
     }
 }
-displayOrder();
+displayOrder();
+