Merge pull request #253 from rupeshv2121/rupesh10

Added Animation
Ojas-Arora · Feb 9, 2025 · 88a021f · 88a021f
2 parents 8c08e0f + 2bce6ef
commit 88a021f
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/contributors/contributor.css b/contributors/contributor.css
@@ -629,7 +629,6 @@ body.dark p {
   backdrop-filter: blur(5px);
   width: 270px;
   margin-bottom: 40px;
-  z-index: 1;
   border: 1px white solid;
 }
 
@@ -760,6 +759,22 @@ body.dark p {
 }
 
 /* Contributor Name */
+
+@keyframes scaleAnimation {
+  from {
+    transform: scale(0.5);
+  }
+  to {
+    transform: scale(1.3);
+  }
+}
+
+.contributor-card {
+  animation: scaleAnimation linear;
+  animation-timeline: view();
+  animation-range: entry 30% cover 70%;
+}
+
 .contributor-card h3 {
   margin: 15px 0;
   font-size: 1.6rem;

diff --git a/contributors/contributor.html b/contributors/contributor.html
@@ -105,38 +105,6 @@ <h1 class="title">Contributors of Ajivika</h1>
       <!-- Dynamic contributors will be added here -->
     </div>
   </div>
-
-  <script src="contributor.js"></script>
-
-
-    <script>
-        // hamburger menu js
-        function toggleMenu() {
-            const navLinks = document.querySelector('.nav-links');
-            navLinks.classList.toggle('active');
-        }
-    </script>
-
-
-
-    <section class="section home-section">
-        <div id="google_element"></div>
-        <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate" onerror="handleError(this)"></script>
-        <script type="text/javascript">
-          function loadGoogleTranslate() {
-            new google.translate.TranslateElement({
-              pageLanguage: "en",
-              includedLanguages: "en,hi,pa,sa,mr,ur,bn,es,fr,de,it",
-              layout: google.translate.TranslateElement.InlineLayout.SIMPLE
-            }, "google_element");
-          }
-          function handleError(e) {
-            console.error("Error loading Google Translate script:", e);
-          }
-        </script>
-
-
-
     <!-- Footer -->
     <footer style="background-color: #222; color: #fff; padding: 20px 10px;">
         <div class="footer-container" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; max-width: 1200px; margin: auto;">
@@ -229,9 +197,32 @@ <h3 style="color: #d6a52b;">Subscribe to Our Newsletter</h3>
     <button class="image-button">
         <img src="image.png" alt="Image Button" class="image-icon">
     </button>
-
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="../index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="contributor.js"></script>
+    <script>
+        // hamburger menu js
+        function toggleMenu() {
+            const navLinks = document.querySelector('.nav-links');
+            navLinks.classList.toggle('active');
+        }
+    </script>
+    <section class="section home-section">
+        <div id="google_element"></div>
+        <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate" onerror="handleError(this)"></script>
+        <script type="text/javascript">
+          function loadGoogleTranslate() {
+            new google.translate.TranslateElement({
+              pageLanguage: "en",
+              includedLanguages: "en,hi,pa,sa,mr,ur,bn,es,fr,de,it",
+              layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+            }, "google_element");
+          }
+          function handleError(e) {
+            console.error("Error loading Google Translate script:", e);
+          }
+        </script>
+
 <script>
     let slideIndex = 0;
     showSlides();

diff --git a/contributors/contributor.js b/contributors/contributor.js
@@ -227,3 +227,25 @@ for your future endeavors.`;
 
 // Fetch and render contributors on page load
 fetchContributors();
+
+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
+})
+
+gsap.from("#contributors .contributor-card button", {
+  opacity: 0,
+  duration: 1,
+  y: -200,
+})
diff --git a/index.js b/index.js
@@ -39,7 +39,7 @@ gsap.from(".options-container .option-card", {
         trigger: ".options-container",
         scroller: "body",
         scrub: 2,
-        start: "top 50%",
+        start: "top 70%",
         end: "top 70%",
         pin: true
     }