refactor animations once again

src/components/ui/card.tsx

@@ -1,7 +1,7 @@
-import { useGSAP } from "@gsap/react"; import * as React from "react"
+import * as React from "react"
 import { useRef } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import gsap from 'gsap'
+import { useReveal } from "~/app/_components/Animated/useReveal";
 import { cn } from "~/lib/utils"
 
 function Card({
@@ -27,40 +27,17 @@ function AnimatedCard({
   position = 0,
   size = "default",
   scrollOnly = false,
+  once = false,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean }) {
-  const gsapContext = useGsapContext()
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean, once?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null)
-  useGSAP(() => {
-    const rect = ref.current?.getBoundingClientRect()
-    const scroller = gsapContext?.getScroller()
-    console.log(scroller)
-    let viewportTop = 0
-    let viewportBottom = window.innerHeight
-    if (scroller && scroller instanceof Element) {
-      const scrollerRect = scroller.getBoundingClientRect()
-      viewportTop = scrollerRect.top
-      viewportBottom = scrollerRect.top + scrollerRect.height
-    }
-    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
-    console.log(isInView)
-    const fromVars = { x: -100, opacity: 0, duration: 0.5 }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
-    } else {
-      gsap.from(ref.current,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: ref.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(ref, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `card-${position}`,
+    makeReveal: (el) => gsap.from(el, { x: -100, opacity: 0, duration: 0.5, paused: true }),
+  })
   return (
     <div
       ref={ref}