reasonable animation system

src/components/ui/card.tsx

@@ -1,5 +1,7 @@
-import * as React from "react"
-
+import { useGSAP } from "@gsap/react";import * as React from "react"
+import { useRef } from "react";
+import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import gsap from 'gsap'
 import { cn } from "~/lib/utils"
 
 function Card({
@@ -20,6 +22,35 @@ function Card({
   )
 }
 
+function AnimatedCard({
+  className,
+  position = 0,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position: gsap.Position }) {
+  const gsapContext = useGsapContext()
+  const ref = useRef<HTMLDivElement|null>(null)
+  useGSAP(() => {
+    gsapContext?.addAnimation(gsap.from(ref.current,{
+      x: -100,
+      opacity: 0,
+      duration: 0.5
+    }),position)
+  })
+  return (
+    <div
+      ref={ref}
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -100,4 +131,5 @@ export {
   CardAction,
   CardDescription,
   CardContent,
+  AnimatedCard
 }