refactor animations once again

src/app/_components/Animated/AnimateIn.tsx

@@ -1,62 +1,43 @@
-import { useGSAP } from "@gsap/react";
 import { useRef, type HTMLAttributes, type ReactNode } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 import { cn } from "~/lib/utils";
+import { useReveal } from "./useReveal";
+
 const AnimateTextIn = ({
   children,
   animation = "type",
   position = 0,
-  tlId = undefined,
   speed = 1,
   scrollOnly = false,
+  once = false,
   className
 }: {
   children: ReactNode,
   animation?: "type" | "slide",
   position?: gsap.Position,
-  tlId?: string,
   scrollOnly?: boolean,
+  once?: boolean,
   speed?: number,
   className?: HTMLAttributes<HTMLDivElement>['className']
 }) => {
   const el = useRef<HTMLDivElement>(null)
-  const gsapContext = useGsapContext();
-  useGSAP(() => {
-    const rect = el.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 chars = new SplitText(el.current, { type: 'chars' })
-    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100, duration: 0 }), 0, tlId)
-    const fromVars = animation === "slide"
-      ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-      : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars), position, tlId)
-    } else {
-      gsap.from(chars.chars,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: el.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(el, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `text-${position}`,
+    makeReveal: (node) => {
+      // The wrapper starts at opacity 0 (so there's no flash of unsplit text);
+      // reveal the wrapper and let the per-character tween do the animation.
+      gsap.set(node, { opacity: 1 })
+      const split = new SplitText(node, { type: 'chars' })
+      const fromVars = animation === "slide"
+        ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut' }
+        : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut' }
+      return gsap.from(split.chars, { ...fromVars, paused: true })
+    },
+  })
   return (
     <div ref={el} className={cn(className, "opacity-0")}>
       {children}