GNXSOFT.COM

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

@@ -0,0 +1,38 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const FadeImageBottom = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const deviceWidth = window.innerWidth;
+
+    if (
+      document.querySelectorAll(".fade-img").length > 0 &&
+      deviceWidth >= 992
+    ) {
+      gsap.utils.toArray(".fade-img").forEach((el: any) => {
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: el,
+            start: "center center",
+            end: "+=40%",
+            scrub: 1,
+            pin: false,
+            invalidateOnRefresh: true,
+          },
+        });
+
+        tl.to(el, {
+          y: "120px",
+          zIndex: "-1",
+          duration: 1,
+        });
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default FadeImageBottom;