refactor to use existing animated components

src/app/_providers/GsapProvicer.tsx

@@ -103,13 +103,6 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     return () => { console.log("gsap cleanup") }
   })
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    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>>([])
@@ -124,6 +117,21 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     else readyCbs.current.push(cb)
   },[])
 
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (readyFired.current) return
+    tl.current?.add(animation, position);
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+  },[])
+
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
   // can fire freely while content height animates.
   const refreshQueued = useRef(false)

src/app/cv/_components/CvCategory.tsx

@@ -1,24 +1,24 @@
 'use client'
 import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
 import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
 import { ScrollArea } from "~/components/ui/scroll-area";
 type CvCategoryProps = {
   initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
   layout: "row"|"col",
+  position?: number,
   children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
 export default function CvCategory(props:CvCategoryProps)  {
   const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
   const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
+  const position = props.position ?? 0
 		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+			<AnimatedCard position={position} className={cn(props.layout == "row" ? "w-full" : "", "h-screen")}>
 				<CardHeader>
 					<CardTitle>
 						{category.data?.name}
@@ -28,7 +28,7 @@ export default function CvCategory(props:CvCategoryProps)  {
 					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
 						<ScrollArea>
 						{entries.data?.map((entry,i) => (
-							<AnimatePopUp position={i}key={entry.id}>
+							<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
 							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
 							</AnimatePopUp>
 						))}
@@ -37,6 +37,6 @@ export default function CvCategory(props:CvCategoryProps)  {
 					:
 					<></>
 				}
-			</Card>
+			</AnimatedCard>
 		)
 }

src/app/cv/page.tsx

@@ -1,62 +1,27 @@
 'use client'
-import { useGSAP } from "@gsap/react";
+import { useTimeLine } from "../_providers/GsapProvicer";
-import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
 import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
-import gsap from 'gsap'
 export default function CvPage() {
   const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
   const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
   const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
   const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
-  const gsapContext = useGsapContext()
-  const container = useRef<HTMLDivElement>(null)
-  enum Direction {
-    Left = 1,
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
-    }
-  }
   useTimeLine(col2Categories.data)
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data, col1Categories.data, col2Categories.data], revertOnUpdate: true })
   return (
     <>
-      <SidebarProvider ref={container}>
+      <SidebarProvider>
         {sidebarCategories.data &&
           <>
             <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
+            <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
+                {sidebarCategories.data?.map((cat, i) => {
                   if (cat !== undefined) {
                     return (
-                      <CvCategory layout="col" initialData={cat} key={cat.id} />
+                      <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
                     )
                   }
                 })}
@@ -67,26 +32,20 @@ export default function CvPage() {
         <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
           <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
             <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.data?.map((cat) => {
+              {headerCategories.data?.map((cat, i) => (
-                return (
+                <CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
-                  <CvCategory layout="row" initialData={cat} key={cat.id} />
+              ))}
-                )
-              })}
             </div>
             <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
               <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat) => {
+                {col1Categories.data?.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                ))}
-                  )
-                })}
               </div>
               <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat) => {
+                {col2Categories.data?.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                ))}
-                  )
-                })}
               </div>
             </div>
           </div>