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

animated components hidden default

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-18 02:47:03 +02:00
parent cb3ece4f99
commit 62f808b0cf
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/music/_components/Page.tsx
View File

@@ -42,7 +42,9 @@ export default function MusicPage(props: {
</Card.CardHeader> </Card.CardHeader>
<Card.CardContent className="flex flex-col gap-3"> <Card.CardContent className="flex flex-col gap-3">
{track.description && ( {track.description && (
<p className="text-sm text-muted-foreground gsapant">{track.description}</p> <AnimatePopUp once position={i + 1.25} duration={2}>
<p className="text-sm text-muted-foreground">{track.description}</p>
</AnimatePopUp>
)} )}
<AnimatePopUp duration={2} ease='elastic.inOut' position={i + 1.3} once> <AnimatePopUp duration={2} ease='elastic.inOut' position={i + 1.3} once>
<AudioPlayer <AudioPlayer

6
src/components/ui/card.tsx
View File

@@ -37,7 +37,9 @@ function AnimatedCard({
scrollOnly, scrollOnly,
once, once,
debugId: `card-${position}`, debugId: `card-${position}`,
makeReveal: (el) => gsap.from(el, { x: -100, opacity: 0, duration: 0.5, paused: true }), // Start hidden via CSS (see className) so the server-rendered card never
// flashes visible before GSAP runs; reveal animates *to* the shown state.
makeReveal: (el) => gsap.to(el, { x: 0, opacity: 1, duration: 0.5, paused: true }),
}) })
return ( return (
<div <div
@@ -45,7 +47,7 @@ function AnimatedCard({
data-slot="card" data-slot="card"
data-size={size} data-size={size}
className={cn( className={cn(
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm", "opacity-0 -translate-x-[100px] group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
className className
)} )}
{...props} {...props}