working animations

src/app/music/page.tsx

@@ -1,6 +1,8 @@
 'use client'
 import { useGSAP } from "@gsap/react";
-import { useLayoutEffect,
+import { useEffect,
+useEffectEvent,
+useLayoutEffect,
 useRef } from "react";
 import { trpc } from "~/app/_trpc/Client";
 import * as Card from "~/components/ui/card";
@@ -8,21 +10,20 @@ import { useGsapContext } from "../_providers/GsapProvicer";
 import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
 import { Spinner } from "~/components/ui/spinner";
 import AnimateTextIn from "../_components/Animated/AnimateIn";
-import gsap from 'gsap'
 export default function MusicPage() {
 	const { data: tracks, isLoading } = trpc.music.list.useQuery();
-	const container = useRef<HTMLDivElement>(null)
 	const gsapContext = useGsapContext();
-	useGSAP(() => {
-		gsapContext?.resumeTimeline()
+	useEffect(() => {
+		if (tracks) {
+			gsapContext?.resumeTimeline()
+		}
 		return () => {
 			console.log("page cleanup")
 			gsapContext?.resetTimeline()
 		}
-	});
-
+	},[tracks]);
 	return (<>
-		<div ref={container} className="w-full h-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
+		<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"/>
 			<AnimateTextIn position={0.5}>
 			<div className="flex flex-row h-8 content-center items-center">