gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fix-cv-animations'

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-16 18:56:05 +02:00
parent 39563b6740 1e0f033d07
commit 13649cd6dc
3 changed files with 39 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/_providers/GsapProvicer.tsx
View File

@@ -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)

18
src/app/cv/_components/CvCategory.tsx
View File

@@ -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 { cn } from "~/lib/utils"
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>
))}
@@ -36,7 +36,7 @@ export default function CvCategory(props:CvCategoryProps) {
</CardContent>
:
<></>
}
</Card>
)
}
</AnimatedCard>
)
}

71
src/app/cv/page.tsx
View File

@@ -1,92 +1,51 @@
'use client'
import { useGSAP } from "@gsap/react";
import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
import { 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} />
)
}
})}
</SidebarContent>
</Sidebar>
</>
</>
}
<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) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
{headerCategories.data?.map((cat, i) => (
<CvCategory layout="row" position={i} 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) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
{col1Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} 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) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
{col2Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
))}
</div>
</div>
</div>