added Animation in navbar for Different Pages.

Ojas-Arora · Jan 11, 2025 · fe1b9e1 · fe1b9e1
1 parent fc72a19
commit fe1b9e1
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 2 deletions.
diff --git a/contact.js b/contact.js
@@ -6,4 +6,20 @@ body.addEventListener("mousemove", function (e) {
         y: e.y,
         duration: 0.5
     })
+})
+
+gsap.from(".logo", {
+    opacity: 0,
+    y: -30,
+    delay: 0.5,
+    duration: 1
+})
+
+const tl = gsap.timeline();
+tl.from(".nav-links li", {
+    delay: 1,
+    opacity: 0,
+    stagger: 0.25,
+    duration: 1,
+    y: -30
 })
diff --git a/index2.js b/index2.js
@@ -6,4 +6,20 @@ body.addEventListener("mousemove", function (e) {
         y: e.y,
         duration: 0.5
     })
+})
+
+gsap.from(".logo", {
+    opacity: 0,
+    y: -30,
+    delay: 0.5,
+    duration: 1
+})
+
+const tl = gsap.timeline();
+tl.from(".nav-links li", {
+    delay: 1,
+    opacity: 0,
+    stagger: 0.25,
+    duration: 1,
+    y: -30
 })
diff --git a/pricing.css b/pricing.css
@@ -332,8 +332,7 @@ body {
 }
 .image-button1 {
     position: fixed;
-    top: 5px;
-    left: 10px; /* Aligns the button to the left side */
+    left: -75px; /* Aligns the button to the left side */
     background-color: transparent; /* Transparent background */
     border: none;
     border-radius: 50%;

diff --git a/pricing.js b/pricing.js
@@ -6,4 +6,20 @@ body.addEventListener("mousemove", function (e) {
         y: e.y,
         duration: 0.5
     })
+})
+
+gsap.from(".logo", {
+    opacity: 0,
+    y: -30,
+    delay: 0.5,
+    duration: 1
+})
+
+const tl = gsap.timeline();
+tl.from(".nav-links li", {
+    delay: 1,
+    opacity: 0,
+    stagger: 0.25,
+    duration: 1,
+    y: -30
 })
diff --git a/resume.js b/resume.js
@@ -6,4 +6,20 @@ body.addEventListener("mousemove", function (e) {
         y: e.y,
         duration: 0.5
     })
+})
+
+gsap.from(".logo", {
+    opacity: 0,
+    y: -30,
+    delay: 0.5,
+    duration: 1
+})
+
+const tl = gsap.timeline();
+tl.from(".nav-links li", {
+    delay: 1,
+    opacity: 0,
+    stagger: 0.25,
+    duration: 1,
+    y: -30
 })