scroll triggers

src/app/_components/Animated/AnimatedPageTitle.tsx

@@ -7,14 +7,14 @@ const AnimatedPageTitle = (
 ) => {
   const el = useRef<HTMLHeadingElement>(null)
   const gsapContext = useGsapContext();
-  useLayoutEffect(() => {
+  useEffect(() => {
     console.log("add animated title with:",position)
     const split = new SplitText(el.current, { type: "chars" })
     gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
     gsapContext?.addAnimation(gsap.from(split.chars, {
       stagger: 0.05, rotate: -90, opacity: 0, x: -10
     }),'>')
-  })
+  },[])
   return (
     <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
   )