50 lines
856 B
TypeScript
50 lines
856 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { gsap } from "gsap";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface AnimatedCardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export function AnimatedCard({
|
|
children,
|
|
className,
|
|
delay = 0,
|
|
}: AnimatedCardProps) {
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!cardRef.current) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
gsap.from(cardRef.current, {
|
|
opacity: 0,
|
|
y: 30,
|
|
rotationX: -15,
|
|
duration: 0.8,
|
|
delay,
|
|
ease: "power3.out",
|
|
});
|
|
});
|
|
|
|
return () => ctx.revert();
|
|
}, [delay]);
|
|
|
|
return (
|
|
<div
|
|
ref={cardRef}
|
|
className={cn(
|
|
"transform-gpu perspective-1000",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|