music and animation system

src/app/_providers/GsapProvicer.tsx

@@ -1,18 +1,40 @@
 'use client'
 import { useGSAP } from '@gsap/react'
 import gsap from 'gsap'
-import { createContext, useContext, type ReactNode } from 'react'
+import { SplitText } from 'gsap/SplitText'
+import { ScrollTrigger } from 'gsap/all'
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from 'react'
 
 gsap.registerPlugin(useGSAP)
-const GsapContext = createContext<typeof globalThis.gsap | null>(null)
+gsap.registerPlugin(ScrollTrigger)
+gsap.registerPlugin(SplitText)
+const GsapContext = createContext<{ addAnimation: (animation: gsap.core.TimelineChild) => void, resetTimeline: () => void} | null>(null)
 
 export function useGsapContext() {
   return useContext(GsapContext)
 }
 
-export default function GsapProvider({children}:{children:ReactNode}) {
+export default function GsapProvider({ children }: { children: ReactNode }) {
+  const [tl, setTl] = useState<GSAPTimeline | undefined>();
+  const indexRef = useRef<number>(0)
+  const { contextSafe } = useGSAP(() => {
+    console.log("App effect (create timeline)");
+    const tl = gsap.timeline();
+    setTl(() => tl);
+  }, []);
+  
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild) => {
+    indexRef.current += 1;
+    console.log(indexRef.current)
+    tl && tl.add(animation, indexRef.current * 2);
+  }, [tl]);
+  const resetTimeline = useCallback(() => {
+    const tl = gsap.timeline();
+    setTl(() => tl)
+    indexRef.current = 0;
+  },[tl])
   return (
-    <GsapContext.Provider value={gsap}>
+    <GsapContext.Provider value={{ addAnimation, resetTimeline }}>
       {children}
     </GsapContext.Provider>
   )