scroll triggers

src/app/_components/Animated/AnimateIn.tsx

@@ -1,28 +1,25 @@
 import { useGSAP } from "@gsap/react";
-import { useEffect,
-useLayoutEffect,
-useRef, type ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 const AnimateTextIn = ({children,animation="type",position}:{children:ReactNode,animation?:"type"|"slide",position:gsap.Position}) => {
   const el = useRef<HTMLDivElement>(null)
   const gsapContext = useGsapContext();
-  useLayoutEffect(() => {
-    console.log("aniamte text with:",position)
-    const tl = gsap.timeline();
+  useGSAP(() => {
+    const rect = el.current?.getBoundingClientRect()
+    const isInView = rect && rect.top < window.innerHeight
     const chars = new SplitText(el.current,{type:'chars'})
-    tl.to(el.current,{opacity:100, duration:0})
-    switch(animation) {
-      case "slide":
-        tl.from(chars.chars,{opacity:0, x:-10, duration: 0.2, stagger: {each: 0.08}, ease:'bounce.inOut', scrollTrigger: el.current })
-        break
-      case "type":
-        tl.from(chars.chars,{opacity:0, duration: 0.01, stagger: {each: 0.04}, ease: 'bounce.inOut', scrollTrigger: el.current })
-        break
+    gsapContext?.addAnimation(gsap.to(el.current,{opacity:100, duration:0}),0)
+    const fromVars = animation === "slide"
+      ? {opacity:0, x:-10, duration: 0.2, stagger: {each: 0.08}, ease:'bounce.inOut'}
+      : {opacity:0, duration: 0.01, stagger: {each: 0.04}, ease: 'bounce.inOut'}
+    if (isInView) {
+      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars),position)
+    } else {
+      gsap.from(chars.chars, { ...fromVars, scrollTrigger: { trigger: el.current, start: 'top 85%', scroller: gsapContext?.getScroller() } })
     }
-    gsapContext?.addAnimation(tl,position)
-  })
+  }, { dependencies: [] })
   return (
     <div ref={el} className="opacity-0">
       {children}