GNXSOFT.COM

gnx-react/components/shared/layout/animations/FadeAnimations.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const FadeAnimations = () => {
+  useEffect(() => {
+    if (window.innerWidth >= 992) {
+      gsap.registerPlugin(ScrollTrigger);
+      const fadeWrapperRefs = document.querySelectorAll(".fade-wrapper");
+      fadeWrapperRefs.forEach((fadeWrapperRef) => {
+        const fadeItems = fadeWrapperRef.querySelectorAll(".fade-top");
+        const fadeItemsBottom = fadeWrapperRef.querySelectorAll(".fade-bottom");
+        const fadeItemsLeft = fadeWrapperRef.querySelectorAll(".fade-left");
+        const fadeItemsRight = fadeWrapperRef.querySelectorAll(".fade-right");
+
+        // from top
+        fadeItems.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            y: 100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                y: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from bottom
+        fadeItemsBottom.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            y: -100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                y: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from left
+        fadeItemsLeft.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            x: 100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                x: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from right
+        fadeItemsRight.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            x: -100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                x: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default FadeAnimations;