reasonable animation system

src/app/_components/Animated/AnimateIn.tsx

@@ -1,12 +1,14 @@
 import { useGSAP } from "@gsap/react";
-import { useRef, type ReactNode } from "react";
+import { useLayoutEffect,
+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"}:{children:ReactNode,animation?:"type"|"slide",index?:gsap.Position}) => {
+const AnimateTextIn = ({children,animation="type",position}:{children:ReactNode,animation?:"type"|"slide",position:gsap.Position}) => {
   const el = useRef<HTMLDivElement>(null)
   const gsapContext = useGsapContext();
   useGSAP(() => {
+    console.log("aniamte text with:",position)
     const tl = gsap.timeline();
     const chars = new SplitText(el.current,{type:'chars'})
     tl.to(el.current,{opacity:100, duration:0})
@@ -18,8 +20,8 @@ const AnimateTextIn = ({children,animation="type"}:{children:ReactNode,animation
         tl.from(chars.chars,{opacity:0, duration: 0.01, stagger: {each: 0.04}, ease: 'bounce.inOut', scrollTrigger: el.current })
         break
     }
-    gsapContext?.addAnimation(tl)
-  },{scope:el})
+    gsapContext?.addAnimation(tl,position)
+  })
   return (
     <div ref={el} className="opacity-0">
       {children}

src/app/_components/Animated/AnimatedPageTitle.tsx

@@ -1,24 +1,25 @@
-import { useGSAP } from "@gsap/react"; import { useRef } from "react";
+import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef } from "react";
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 const AnimatedPageTitle = (
-  { text }: { text: string }
+  { text, position }: { text: string, position:gsap.Position }
 ) => {
   const el = useRef<HTMLHeadingElement>(null)
   const gsapContext = useGsapContext();
   useGSAP(() => {
+    console.log("add animated title with:",position)
     const tl = gsap.timeline();
     tl.addLabel("title")
     const split = new SplitText(el.current, { type: "chars" })
-    tl.to(el.current, { opacity: 100 })
+    tl.from(el.current, { opacity: 0 })
     tl.from(split.chars, {
       stagger: 0.05, rotate: -90, opacity: 0, x: -10
     }, '>')
-    gsapContext?.addAnimation(tl)
-  }, { scope: el })
+    gsapContext?.addAnimation(tl,position)
+  })
   return (
-    <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
+    <h1 className="text-4xl opacity-100 font-bold text-balance w-full" ref={el}> {text} </h1>
   )
 }