refactor animations once again

src/app/_providers/GsapProvicer.tsx

@@ -9,11 +9,32 @@ gsap.registerPlugin(useGSAP)
 gsap.registerPlugin(ScrollTrigger)
 gsap.registerPlugin(SplitText)
 gsap.registerPlugin(GSDevTools)
+
+// iOS Safari shows/hides its address bar at the scroll extremes, which resizes
+// the viewport and makes ScrollTrigger refresh + fire spurious onLeave/onEnter
+// toggles (text animating out at the bottom and not coming back). Ignoring those
+// mobile-toolbar resizes keeps the real enter/leave reverse behavior intact.
+ScrollTrigger.config({ ignoreMobileResize: true })
+
+// Flip to true to draw ScrollTrigger start/end markers on every animated
+// element and mount the GSDevTools timeline scrubber. Handy for seeing exactly
+// where each card's enter/exit lines sit relative to the viewport.
+export const GSAP_DEBUG = false
 const GsapContext = createContext<{
+  // Add a real animation (with its own duration) to the entrance timeline.
   addAnimation: (
     animation: gsap.core.TimelineChild,
     position: gsap.Position
   ) => void,
+  // Schedule a zero-duration callback at `position` — used to *start* an
+  // independent reveal tween so the timeline only orchestrates timing.
+  schedule: (fn: () => void, position: gsap.Position) => void,
+  // Run `cb` once the entrance is done (timeline complete or first user scroll).
+  onReady: (cb: () => void) => void,
+  // Re-measure all ScrollTriggers (throttled to once per frame). Call it
+  // whenever an animation changes content height so trigger positions stay
+  // aligned with the real layout.
+  requestRefresh: () => void,
   resetTimeline: () => void,
   resumeTimeline: () => void,
   getScroller: () => Element | Window | null
@@ -70,29 +91,104 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     // }
     return scrollerRef.current
   }, [])
+  const devToolsCreated = useRef(false)
   useGSAP(() => {
     if (!tl.current) {
       tl.current = gsap.timeline({ paused: true })
     }
+    if (GSAP_DEBUG && tl.current && !devToolsCreated.current) {
+      devToolsCreated.current = true
+      GSDevTools.create({ animation: 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 !== undefined)
     tl.current?.add(animation, position);
   },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    tl.current?.add(fn, position)
+  },[])
+
+  // Handoff: fire registered callbacks once, when the entrance finishes.
+  const readyFired = useRef(false)
+  const readyCbs = useRef<Array<() => void>>([])
+  const fireReady = useCallback(() => {
+    if (readyFired.current) return
+    readyFired.current = true
+    readyCbs.current.forEach((cb) => cb())
+    readyCbs.current = []
+  },[])
+  const onReady = useCallback((cb: () => void) => {
+    if (readyFired.current) cb()
+    else readyCbs.current.push(cb)
+  },[])
+
+  // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
+  // can fire freely while content height animates.
+  const refreshQueued = useRef(false)
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return
+    refreshQueued.current = true
+    requestAnimationFrame(() => {
+      refreshQueued.current = false
+      ScrollTrigger.refresh()
+    })
+  },[])
+
+  const scrollCleanup = useRef<(() => void) | null>(null)
+  const resizeObserver = useRef<ResizeObserver | null>(null)
+
   const resetTimeline = useCallback(() => {
     tl.current?.kill()
     tl.current?.revert()
     ScrollTrigger.getAll().forEach(st => st.kill())
+    resizeObserver.current?.disconnect()
+    scrollCleanup.current?.()
+    scrollCleanup.current = null
+    readyFired.current = false
+    readyCbs.current = []
     tl.current = gsap.timeline({paused:true})
   },[])
+
   const resumeTimeline = useCallback(() => {
-    console.log("resuming timeline:",tl.current)
-    tl.current?.resume()
-  },[])
+    const t = tl.current
+    if (!t) return
+    // When the orchestrated entrance finishes, hand off to scroll control and
+    // realign triggers against the now-settled layout.
+    t.eventCallback("onComplete", () => { fireReady(); ScrollTrigger.refresh() })
+
+    const scroller = getScroller()
+    // If the user scrolls before the entrance finishes, snap it to the end and
+    // switch to scroll control so the timeline and ScrollTriggers never fight
+    // over the same elements.
+    scrollCleanup.current?.()
+    const onFirstScroll = () => { t.progress(1); fireReady() }
+    scroller?.addEventListener("scroll", onFirstScroll, { once: true, passive: true })
+    scrollCleanup.current = () => scroller?.removeEventListener("scroll", onFirstScroll)
+
+    // Continuously realign triggers while content height changes — entrance
+    // growth, scroll-driven collapses, late-loading media.
+    if (scroller instanceof Element) {
+      const target = scroller.firstElementChild ?? scroller
+      resizeObserver.current?.disconnect()
+      resizeObserver.current = new ResizeObserver(scheduleRefresh)
+      resizeObserver.current.observe(target)
+    }
+
+    t.resume()
+  },[getScroller, fireReady, scheduleRefresh])
+
+  // Fonts/markdown/images loading also change content height after the triggers
+  // were created; refresh so start/end stay aligned with the real card sizes.
+  useEffect(() => {
+    const refresh = () => ScrollTrigger.refresh()
+    window.addEventListener("load", refresh)
+    document.fonts?.ready.then(refresh).catch(() => {})
+    return () => window.removeEventListener("load", refresh)
+  }, [])
   return (
-    <GsapContext.Provider value={{ addAnimation, resetTimeline, resumeTimeline, getScroller }}>
+    <GsapContext.Provider value={{ addAnimation, schedule, onReady, requestRefresh: scheduleRefresh, resetTimeline, resumeTimeline, getScroller }}>
       {children}
     </GsapContext.Provider>
   )