Initial commit

src/components/cardStack/hooks/useCardAnimation.ts

@@ -0,0 +1,95 @@
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { CardAnimationType } from "../types";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface UseCardAnimationProps {
+  animationType: CardAnimationType;
+  itemCount: number;
+}
+
+export const useCardAnimation = ({ animationType, itemCount }: UseCardAnimationProps) => {
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+
+  useGSAP(() => {
+    if (animationType === "none" || itemRefs.current.length === 0) return;
+
+    const items = itemRefs.current.filter((el) => el !== null);
+
+    if (animationType === "opacity") {
+      gsap.fromTo(
+        items,
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: 1.25,
+          stagger: 0.15,
+          ease: "sine",
+          scrollTrigger: {
+            trigger: items[0],
+            start: "top 80%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "slide-up") {
+      items.forEach((item, index) => {
+        gsap.fromTo(
+          item,
+          { opacity: 0, yPercent: 15 },
+          {
+            opacity: 1,
+            yPercent: 0,
+            duration: 1,
+            delay: index * 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      });
+    } else if (animationType === "scale-rotate") {
+      gsap.fromTo(
+        items,
+        { scaleX: 0, rotate: 10 },
+        {
+          scaleX: 1,
+          rotate: 0,
+          duration: 1,
+          stagger: 0.15,
+          ease: "power3",
+          scrollTrigger: {
+            trigger: items[0],
+            start: "top 80%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "blur-reveal") {
+      gsap.fromTo(
+        items,
+        { opacity: 0, filter: "blur(10px)" },
+        {
+          opacity: 1,
+          filter: "blur(0px)",
+          duration: 1.2,
+          stagger: 0.15,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: items[0],
+            start: "top 80%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    }
+  }, [animationType, itemCount]);
+
+  return { itemRefs };
+};