animation stuff

src/app/_components/Animated/AnimateIn.tsx

@@ -1,30 +1,41 @@
 import { useGSAP } from "@gsap/react";
-import { useRef, type ReactNode } from "react";
+import { useRef, type HTMLAttributes, 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}) => {
+import { cn } from "~/lib/utils";
+const AnimateTextIn = ({
+  children,
+  animation = "type",
+  position,
+  className
+}: {
+  children: ReactNode,
+  animation?: "type" | "slide",
+  position: gsap.Position,
+  className?:HTMLAttributes<HTMLDivElement>['className']
+}) => {
   const el = useRef<HTMLDivElement>(null)
   const gsapContext = useGsapContext();
   useGSAP(() => {
     const rect = el.current?.getBoundingClientRect()
     const isInView = rect && rect.top < window.innerHeight
-    const chars = new SplitText(el.current,{type:'chars'})
-    gsapContext?.addAnimation(gsap.to(el.current,{opacity:100, duration:0}),0)
+    const chars = new SplitText(el.current, { type: 'chars' })
+    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'}
+      ? { opacity: 0, x: -10, duration: 0.2, stagger: { each: 0.08 }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
+      : { opacity: 0, duration: 0.01, stagger: { each: 0.04 }, ease: 'bounce.inOut', onComplete: () => chars.revert()  }
     if (isInView) {
-      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars),position)
+      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars), position)
     } else {
       gsap.from(chars.chars, { ...fromVars, scrollTrigger: { trigger: el.current, start: 'top 85%', scroller: gsapContext?.getScroller() } })
     }
   }, { dependencies: [] })
   return (
-    <div ref={el} className="opacity-0">
+    <div ref={el} className={cn(className,"opacity-0")}>
       {children}
     </div>
- )
+  )
 }
 
 export default AnimateTextIn;

src/app/_components/Animated/AnimatePopUp.tsx

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import AnimatedDiv from "./AnimatedDiv";
+import { cn } from "~/lib/utils";
+const AnimatePopUp = ({
+  children,
+  position,
+  className,
+  duration=1,
+  ease='elastic'
+}:{
+    children:ReactNode
+    position:gsap.Position,
+    className?:HTMLAttributes<HTMLDivElement>['className']
+    duration?:number,
+    ease?:gsap.EaseString|gsap.EaseFunction
+  }) => {
+  return (
+    <AnimatedDiv children={children} position={position} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
+  )
+}
+
+export default AnimatePopUp;

src/app/_components/Animated/AnimatedDiv.tsx

@@ -0,0 +1,41 @@
+import gsap from "gsap";
+import { type HTMLAttributes,
+type ReactNode, useLayoutEffect, useRef } from "react";
+import { useGsapContext } from "~/app/_providers/GsapProvicer";
+const AnimatedDiv = (
+  {
+    children,
+    position,
+    className,
+    animationMode='to',
+    ...tweenVars
+  }:
+  gsap.TweenVars & {
+    children:ReactNode,
+    position:gsap.Position,
+    animationMode?: 'from'|'to',
+    className?:HTMLAttributes<HTMLDivElement>['className']
+  }
+) => {
+  const div = useRef<HTMLDivElement>(null);
+  const gsapContext = useGsapContext()
+  useLayoutEffect(() => {
+    let tween:gsap.core.Tween;
+    switch(animationMode) {
+      case 'from':
+        tween = gsap.from(div.current,tweenVars);
+        break;
+      case 'to':
+        tween = gsap.to(div.current,tweenVars);
+        break;
+    }
+    gsapContext?.addAnimation(tween,position)
+  },[])
+  return (
+    <div ref={div} className={className}>
+      {children}
+    </div>
+  )
+}
+
+export default AnimatedDiv;

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>
   )
 }