96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
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 };
|
|
};
|