gsap animations added

Rakesh9100 · Feb 13, 2024 · c613c5d · c613c5d
1 parent 59f14f6
commit c613c5d
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 63 deletions.
diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
@@ -180,10 +180,12 @@ <h1>Simple Accordion</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+   <!-- gsap and scrollTrigger plugin -->
+   <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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
 

diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -450,10 +450,12 @@ <h1>Interactive Balls Background</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+   <!-- gsap and scrollTrigger plugin -->
+   <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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
@@ -179,11 +179,12 @@ <h1>Parallel Park Breadcrumb</h1>
             </div>
         </div>
     </section>
-
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -378,11 +378,12 @@ <h1>Swipe Right Button</h1>
             </div>
         </div>
     </section>
-
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -283,10 +283,12 @@ <h1>User Attention Card</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+   <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
     <!-- SCROLL TO TOP BUTTON -->
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>

diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -229,11 +229,12 @@ <h1>Card Carousel</h1>
             </div>
         </div>
     </section>
-
-    <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="../js_files/commonanimation.js"></script>
+  <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/dropdowns.html b/assets/html_files/dropdowns.html
@@ -88,10 +88,12 @@ <h1>The More Menu Dropdown</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+    <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html
@@ -153,10 +153,12 @@ <h1>Animated Stylish Footer</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+ <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -282,10 +282,12 @@ <h1>Animated Border Login Form</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -459,10 +459,12 @@ <h1>Polygon Loader</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html
@@ -231,10 +231,12 @@ <h1>Pulse Animated Navigation Bar</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+    <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html
@@ -229,10 +229,12 @@ <h1>Magnifying Glass Search Bar</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html
@@ -294,10 +294,12 @@ <h1>Shaking Text Animation</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+<!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->

diff --git a/assets/html_files/transfer-lists.html b/assets/html_files/transfer-lists.html
@@ -88,10 +88,12 @@ <h1>Neumorphic Transfer List</h1>
         </div>
     </section>
 
-    <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="../js_files/commonanimation.js"></script>
+ <!-- gsap and scrollTrigger plugin -->
+<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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+<script src="../js_files/commonanimation.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>
 

diff --git a/assets/js_files/GsapAnimations.js b/assets/js_files/GsapAnimations.js
@@ -0,0 +1,24 @@
+//gsap animations
+
+
+//animation to header part(navbar , logo )
+gsap.from(".navbar", { duration: 1, y: -100, opacity: 0, ease: "power4.out", delay: 1 });
+gsap.from(".logo", { duration: 1, scale: 0, ease: "elastic.out(1, 0.3)", delay: 1 });
+gsap.from(".nav-item", { duration: 0.8, opacity: 0, y: -20, stagger: 0.2, ease: "power2.out", delay: 1.5 });
+
+
+// animation for cards
+gsap.from(".zoom-effect",{
+    scale:0.7,
+    opacity:0,
+    duration:1,
+    stagger:0.2,
+    scrollTrigger:{
+        trigger: ".zoom-effect",
+        scroller:"body",
+        start:"top 70%",
+        end:"top 65%",
+        scrub:2 ,
+        // markers : true,
+    },
+});
diff --git a/assets/js_files/commonanimation.js b/assets/js_files/commonanimation.js
@@ -13,7 +13,29 @@ tl.from(".heading", {
     y: 10
 });
 
-tl.from(".contain", {
-    opacity: 0,
-    y: 10
+
+function triggerAnimation() {
+    gsap.utils.toArray('.box').forEach((box, index) => {
+        const delay = index * 0.2; // Delay for stagger effect
+        gsap.fromTo(box, {
+            opacity: 0, // Start with opacity 0
+            x: index % 2 === 0 ? '-=100' : '+=100' // Move from left or right based on index
+        }, {
+            opacity: 1,
+            x: 0,
+            delay,
+            duration: 0.8, // Duration of the animation
+            ease: 'power2.out' // Easing function
+        });
+    });
+}
+
+// ScrollTrigger to trigger the animation when in the viewport
+gsap.registerPlugin(ScrollTrigger);
+ScrollTrigger.create({
+    trigger: '.contain', // Trigger animation when the container is in the viewport
+    start: "top center", // Start the animation when the container reaches the center of the viewport
+    onEnter: triggerAnimation // Call the function to trigger animation
 });
+
+
diff --git a/index.html b/index.html
@@ -269,7 +269,10 @@ <h2>Transfer Lists</h2>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
-
+     <!-- gsap and scrollTrigger plugin -->
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
+     <script src="./assets/js_files/GsapAnimations.js"></script>
     <!-- SCRIPT FILE FOR CHAT BOT-->
     <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
     <script src="https://mediafiles.botpress.cloud/c49225f4-f243-440f-a8ab-9ef97d82964b/webchat/config.js" defer></script>