Animated List

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion, AnimatePresence, createLayoutMotion } from "motion-sv";
4	import { cn } from "$UTILS$";
5	import type { Snippet } from "svelte";
6 
7	interface AnimatedListProps<T> {
8		items: T[];
9		class?: string;
10		delay?: number;
11		children: Snippet<[T, number]>;
12	}
13 
14	type AnimatedListPropsGeneric = AnimatedListProps<any>;
15 
16	let { items, class: className, delay = 1000, children }: AnimatedListPropsGeneric = $props();
17 
18	// Create layout motion for smooth layout animations
19	const layout = createLayoutMotion(motion);
20	const update = layout.update;
21 
22	// Use a mutable state array instead of derived
23	let itemsToShow = $state<any[]>([]);
24 
25	onMount(() => {
26		// Initialize with first item
27		update.with(() => {
28			itemsToShow = [items[0]];
29		})();
30 
31		let currentIndex = 0;
32 
33		const interval = setInterval(() => {
34			if (currentIndex < items.length - 1) {
35				currentIndex++;
36				// Use update.with to track layout changes
37				update.with(() => {
38					// Add new item at the beginning (top)
39					itemsToShow = [items[currentIndex], ...itemsToShow];
40				})();
41			}
42		}, delay);
43 
44		return () => clearInterval(interval);
45	});
46</script>
47 
48<div class={cn("flex flex-col items-center gap-4", className)}>
49	<AnimatePresence mode="popLayout">
50		{#each itemsToShow as item, i (item.id)}
51			<layout.div
52				initial={{ scale: 0, opacity: 0, y: -8 }}
53				animate={{
54					scale: 1,
55					opacity: 1,
56					y: 0,
57					transition: { type: "spring", stiffness: 500, damping: 30 },
58				}}
59				exit={{
60					scale: 0,
61					opacity: 0,
62					y: 8,
63					transition: { duration: 0.18 },
64				}}
65				layout
66				layoutDependency={itemsToShow.length}
67				class="mx-auto w-full"
68			>
69				{@render children(item, i)}
70			</layout.div>
71		{/each}
72	</AnimatePresence>
73</div>