Initial commit

src/components/hooks/useButtonAnimation.ts

@@ -0,0 +1,77 @@
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { ButtonAnimationType } from "@/types/button";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export const useButtonAnimation = ({ animationType }: { animationType: ButtonAnimationType }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useGSAP(() => {
+    if (animationType === "none" || !containerRef.current) return;
+
+    // First try to find buttons/links, otherwise animate direct children
+    let elements: NodeListOf<Element> | HTMLCollection = containerRef.current.querySelectorAll("button, a");
+    if (elements.length === 0) {
+      // For non-button elements (like Tag), animate the direct children
+      elements = containerRef.current.children;
+    }
+    if (elements.length === 0) return;
+
+    if (animationType === "opacity") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: 1.25,
+          stagger: 0.15,
+          ease: "sine",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "slide-up") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0, yPercent: 30 },
+        {
+          opacity: 1,
+          yPercent: 0,
+          duration: 1,
+          stagger: 0.15,
+          ease: "sine",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "blur-reveal") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0, filter: "blur(10px)" },
+        {
+          opacity: 1,
+          filter: "blur(0px)",
+          duration: 1.2,
+          stagger: 0.15,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    }
+  }, [animationType]);
+
+  return { containerRef };
+};