78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
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 };
|
|
};
|