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

scroll triggers

Browse Source
This commit is contained in:
Gregor Lohaus
2026-03-14 18:35:04 +01:00
parent b5291caa6e
commit 57978d81e1
6 changed files with 102 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/music/page.tsx
View File

@@ -1,44 +1,34 @@
'use client'
import { useGSAP } from "@gsap/react";
import { useEffect,
useEffectEvent,
useLayoutEffect,
useRef } from "react";
import { trpc } from "~/app/_trpc/Client";
import * as Card from "~/components/ui/card";
import { useGsapContext } from "../_providers/GsapProvicer";
import { useTimeLine } from "../_providers/GsapProvicer";
import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
import { Spinner } from "~/components/ui/spinner";
import AnimateTextIn from "../_components/Animated/AnimateIn";
import { ScrollArea } from "~/components/ui/scroll-area";
export default function MusicPage() {
const { data: tracks, isLoading } = trpc.music.list.useQuery();
const gsapContext = useGsapContext();
useEffect(() => {
if (tracks) {
gsapContext?.resumeTimeline()
}
return () => {
console.log("page cleanup")
gsapContext?.resetTimeline()
}
},[tracks]);
return (<>
<div className="w-full h-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
<AnimatedPageTitle position={0} text="Just Some Music I Made"/>
const randdata = Array.from({ length: 100 }, (_, i) => ({ id: i, value: Math.floor(Math.random() * 50) }));
useTimeLine(tracks)
return (
<ScrollArea className="w-full h-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
<AnimatedPageTitle position={0} text="Just Some Music I Made" />
<AnimateTextIn position={0.5}>
<div className="flex flex-row h-8 content-center items-center">
<p className="mr-[1em]">All works on this page are licensed under:</p>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt=""/>
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt=""/>
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt=""/>
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt=""/>
</div>
<div className="flex flex-col lg:flex-row h-fit content-center">
<p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
<div className="flex flex-row">
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
</div>
</div>
</AnimateTextIn>
{tracks && tracks.map((track,i) => (
<Card.AnimatedCard key={track.id} position={i+1}>
{tracks && tracks.map((track, i) => (
<Card.AnimatedCard key={track.id} position={i + 1}>
<Card.CardHeader>
<AnimateTextIn position={i+1.2} animation="slide">
<AnimateTextIn position={i + 1.2} animation="slide">
<Card.CardTitle>{track.title}</Card.CardTitle>
</AnimateTextIn>
</Card.CardHeader>
@@ -52,14 +42,26 @@ export default function MusicPage() {
</Card.CardContent>
</Card.AnimatedCard>
))}
{randdata.map((d, i) => (
<Card.AnimatedCard key={d.id} position={(i + 1) * 0.3}>
<Card.CardHeader>
<AnimateTextIn position={(i + 1.5) * 0.3} animation="slide">
<Card.CardTitle>{d.value}</Card.CardTitle>
</AnimateTextIn>
</Card.CardHeader>
<Card.CardContent className="flex flex-col gap-3">
{d.value}
</Card.CardContent>
</Card.AnimatedCard>
))}
{!isLoading && !tracks?.length &&
<div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
<div className="flex justify-center items-center text-muted-foreground">
No music yet.
</div>
}
{isLoading && <div className="w-full h-full items-center flex flex-row content-center gap-4 justify-center">
<Spinner/> Loading Tracks
<Spinner /> Loading Tracks
</div>}
</div>
</>);
</ScrollArea>
);
}