36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
|
|
export interface UseCardAnimationOptions {
|
|
animationType?: "opacity" | "none" | "slide-up" | "blur-reveal";
|
|
staggerDelay?: number;
|
|
duration?: number;
|
|
}
|
|
|
|
export const useCardAnimation = (options: UseCardAnimationOptions = {}) => {
|
|
const { animationType = "opacity", staggerDelay = 0.1, duration = 0.6 } =
|
|
options;
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current || animationType === "none") return;
|
|
|
|
const cards = containerRef.current.querySelectorAll("[data-card]");
|
|
if (cards.length === 0) return;
|
|
|
|
cards.forEach((card, index) => {
|
|
const element = card as HTMLElement;
|
|
element.style.opacity = "0";
|
|
|
|
const delay = index * staggerDelay;
|
|
setTimeout(() => {
|
|
element.style.transition = `opacity ${duration}s ease-in-out`;
|
|
element.style.opacity = "1";
|
|
}, delay * 1000);
|
|
});
|
|
}, [animationType, staggerDelay, duration]);
|
|
|
|
return {
|
|
containerRef,
|
|
};
|
|
};
|