music and animation system

src/app/_components/Animated/AnimateIn.tsx

@@ -0,0 +1,30 @@
+import { useGSAP } from "@gsap/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"}:{children:ReactNode,animation?:"type"|"slide",index?:gsap.Position}) => {
+  const el = useRef<HTMLDivElement>(null)
+  const gsapContext = useGsapContext();
+  useGSAP(() => {
+    const tl = gsap.timeline();
+    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(tl)
+  },{scope:el})
+  return (
+    <div ref={el} className="opacity-0">
+      {children}
+    </div>
+ )
+}
+
+export default AnimateTextIn;