animation stuff

src/app/_components/Animated/AnimatedPageTitle.tsx

@@ -1,22 +1,21 @@
-import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef } from "react";
+import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef,type ReactNode } from "react";
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 const AnimatedPageTitle = (
-  { text, position }: { text: string, position:gsap.Position }
+  { children, position }: { children: ReactNode, position:gsap.Position }
 ) => {
   const el = useRef<HTMLHeadingElement>(null)
   const gsapContext = useGsapContext();
-  useEffect(() => {
-    console.log("add animated title with:",position)
-    const split = new SplitText(el.current, { type: "chars" })
+  useLayoutEffect(() => {
+    const split = new SplitText(el.current, { type: "lines,chars", autoSplit:true })
     gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
-    gsapContext?.addAnimation(gsap.from(split.chars, {
-      stagger: 0.05, rotate: -90, opacity: 0, x: -10
+    gsapContext?.addAnimation(gsap.from(split.chars, { id: 'titlesplit',
+      stagger: 0.05, rotate: -90, opacity: 0, x: -10, onComplete: () => {split.revert()}
     }),'>')
   },[])
   return (
-    <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
+    <h1 className="text-4xl break-keep opacity-0 font-bold text-balance w-full" ref={el}> {children} </h1>
   )
 }