reasonable animation system

src/app/music/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useGSAP } from "@gsap/react";
-import { useRef } from "react";
+import { useLayoutEffect,
+useRef } from "react";
 import { trpc } from "~/app/_trpc/Client";
 import * as Card from "~/components/ui/card";
 import { useGsapContext } from "../_providers/GsapProvicer";
@@ -13,24 +14,17 @@ export default function MusicPage() {
 	const container = useRef<HTMLDivElement>(null)
 	const gsapContext = useGsapContext();
 	useGSAP(() => {
-		gsapContext?.resetTimeline()
-		const items = gsap.utils.toArray<HTMLElement>('.gsapan');
-		const tl = gsap.timeline();
-		items.map(item => {
-			const player = item.querySelector('.player');
-			tl.from(
-				item, { x: -100, opacity: 0, duration: 0.5, ease: 'power2.inOut', scrollTrigger: item },'<'
-			).from(
-				player, { y: 10, opacity: 0, duration: 0.5, ease: 'power2.inOut' }
-				, '<0.3')
-			gsapContext?.addAnimation(tl);
-		})
-	}, { scope: container, dependencies: [isLoading] });
+		gsapContext?.resumeTimeline()
+		return () => {
+			console.log("page cleanup")
+			gsapContext?.resetTimeline()
+		}
+	});
 
 	return (<>
 		<div ref={container} className="w-full h-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
-			<AnimatedPageTitle text="Just Some Music I Made"/>
-			<AnimateTextIn>
+			<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>
@@ -40,10 +34,10 @@ export default function MusicPage() {
 				<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt=""/>
 			</div>
 			</AnimateTextIn>
-			{tracks && tracks.map((track) => (
-				<Card.Card key={track.id} className='gsapan'>
+			{tracks && tracks.map((track,i) => (
+				<Card.AnimatedCard key={track.id} position={i+1}>
 					<Card.CardHeader>
-						<AnimateTextIn animation="slide">
+						<AnimateTextIn position={i+1.2} animation="slide">
 							<Card.CardTitle>{track.title}</Card.CardTitle>
 						</AnimateTextIn>
 					</Card.CardHeader>
@@ -55,7 +49,7 @@ export default function MusicPage() {
 							Your browser does not support the audio element.
 						</audio>
 					</Card.CardContent>
-				</Card.Card>
+				</Card.AnimatedCard>
 			))}
 			{!isLoading && !tracks?.length &&
 				<div className="flex justify-center items-center min-h-[200px] text-muted-foreground">