scroll triggers

src/app/_providers/GsapProvicer.tsx

@@ -3,7 +3,7 @@ import { useGSAP } from '@gsap/react'
 import gsap from 'gsap'
 import { SplitText } from 'gsap/SplitText'
 import { ScrollTrigger } from 'gsap/all'
-import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from 'react'
+import { createContext, useCallback, useContext, useEffect, useRef, type ReactNode } from 'react'
 
 gsap.registerPlugin(useGSAP)
 gsap.registerPlugin(ScrollTrigger)
@@ -14,16 +14,47 @@ const GsapContext = createContext<{
     position: gsap.Position
   ) => void,
   resetTimeline: () => void,
-  resumeTimeline: () => void
+  resumeTimeline: () => void,
+  getScroller: () => Element | Window | null
 } | null>(null)
 
 export function useGsapContext() {
   return useContext(GsapContext)
 }
 
+export const useTimeLine = (dep:any,all?:boolean) => {
+  const gsapContext = useGsapContext()
+    useEffect(() => {
+      if (dep instanceof Array && all) {
+        let acc = true;
+        let allDepsSatisfied = dep.reduce((p,c) => c !== undefined && p ,acc )
+        if (allDepsSatisfied) {
+          gsapContext?.resumeTimeline()
+        }
+      } else {
+        if (dep) {
+          gsapContext?.resumeTimeline()
+        }
+      }
+    },[dep])
+  useEffect(() => {
+    return () => {
+      gsapContext?.resetTimeline()
+    }
+  },[])
+}
+
 export default function GsapProvider({ children }: { children: ReactNode }) {
   const tl = useRef<gsap.core.Timeline | null>(null)
-  const { contextSafe } = useGSAP(() => {
+  const scrollerRef = useRef<Element | Window | null>(null)
+  const getScroller = useCallback(() => {
+    const cached = scrollerRef.current
+    if (!cached || (cached instanceof Element && !document.contains(cached))) {
+      scrollerRef.current = document.querySelector('[data-slot="scroll-area-viewport"]') ?? window
+    }
+    return scrollerRef.current
+  }, [])
+  useGSAP(() => {
     if (!tl.current) {
       tl.current = gsap.timeline({ paused: true })
     }
@@ -37,6 +68,7 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
   const resetTimeline = useCallback(() => {
     tl.current?.kill()
     tl.current?.revert()
+    ScrollTrigger.getAll().forEach(st => st.kill())
     tl.current = gsap.timeline({paused:true})
   },[])
   const resumeTimeline = useCallback(() => {
@@ -44,7 +76,7 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     tl.current?.resume()
   },[])
   return (
-    <GsapContext.Provider value={{ addAnimation, resetTimeline,resumeTimeline }}>
+    <GsapContext.Provider value={{ addAnimation, resetTimeline, resumeTimeline, getScroller }}>
       {children}
     </GsapContext.Provider>
   )