reasonable animation system

src/app/_providers/GsapProvicer.tsx

@@ -8,33 +8,43 @@ import { createContext, useCallback, useContext, useRef, useState, type ReactNod
 gsap.registerPlugin(useGSAP)
 gsap.registerPlugin(ScrollTrigger)
 gsap.registerPlugin(SplitText)
-const GsapContext = createContext<{ addAnimation: (animation: gsap.core.TimelineChild) => void, resetTimeline: () => void} | null>(null)
+const GsapContext = createContext<{
+  addAnimation: (
+    animation: gsap.core.TimelineChild,
+    position: gsap.Position
+  ) => void,
+  resetTimeline: () => void,
+  resumeTimeline: () => void
+} | null>(null)
 
 export function useGsapContext() {
   return useContext(GsapContext)
 }
 
 export default function GsapProvider({ children }: { children: ReactNode }) {
-  const [tl, setTl] = useState<GSAPTimeline | undefined>();
-  const indexRef = useRef<number>(0)
+  const tl = useRef<gsap.core.Timeline | null>(null)
   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]);
+    if (!tl.current) {
+      tl.current = gsap.timeline({ paused: true })
+    }
+    console.log("resuming timeline:",tl.current)
+    return () => { console.log("gsap cleanup") }
+  })
+
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    console.log("add animation to:", position)
+    tl.current?.add(animation, position);
+  },[])
   const resetTimeline = useCallback(() => {
-    const tl = gsap.timeline();
-    setTl(() => tl)
-    indexRef.current = 0;
-  },[tl])
+    tl.current?.kill()
+    tl.current?.revert()
+    tl.current = gsap.timeline({paused:true})
+  },[])
+  const resumeTimeline = useCallback(() => {
+    tl.current?.resume()
+  },[])
   return (
-    <GsapContext.Provider value={{ addAnimation, resetTimeline }}>
+    <GsapContext.Provider value={{ addAnimation, resetTimeline,resumeTimeline }}>
       {children}
     </GsapContext.Provider>
   )