Animated List

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export type AnimationType = "scale" | "slide" | "fade" | "bounce";
9 
10export interface AnimatedListProps<T> {
11  /** index 0 = newest */
12  items: T[];
13  renderItem: (item: T, index: number) => React.ReactNode;
14  /** @default 8 */
15  maxVisible?: number;
16  /** @default 12 */
17  gap?: number;
18  /** @default "scale" */
19  animation?: AnimationType;
20  className?: string;
21}
22 
23function getAnimationVariants(type: AnimationType) {
24  switch (type) {
25    case "slide":
26      return {
27        initial: { opacity: 0, y: -30 },
28        animate: { opacity: 1, y: 0 },
29        exit: { opacity: 0, y: -20 },
30      };
31    case "fade":
32      return {
33        initial: { opacity: 0 },
34        animate: { opacity: 1 },
35        exit: { opacity: 0 },
36      };
37    case "bounce":
38      return {
39        initial: { opacity: 0, y: -20, scale: 0.8 },
40        animate: { opacity: 1, y: 0, scale: 1 },
41        exit: { opacity: 0, scale: 0.8 },
42      };
43    case "scale":
44    default:
45      return {
46        initial: { opacity: 0, y: -20, scale: 0.95 },
47        animate: { opacity: 1, y: 0, scale: 1 },
48        exit: { opacity: 0, scale: 0.9 },
49      };
50  }
51}
52 
53export function AnimatedList<T extends { id: string | number }>({
54  items,
55  renderItem,
56  maxVisible = 8,
57  gap = 12,
58  animation = "scale",
59  className,
60}: AnimatedListProps<T>) {
61  const visible = items.slice(0, maxVisible);
62  const variants = getAnimationVariants(animation);
63 
64  return (
65    <div className={cn("flex flex-col", className)} style={{ gap: `${gap}px` }}>
66      <AnimatePresence mode="popLayout" initial={false}>
67        {visible.map((item, index) => (
68          <motion.div
69            key={item.id}
70            layout
71            initial={variants.initial}
72            animate={variants.animate}
73            exit={variants.exit}
74            transition={{
75              type: "spring",
76              stiffness: 350,
77              damping: 28,
78              layout: { type: "spring", stiffness: 350, damping: 28 },
79            }}
80          >
81            {renderItem(item, index)}
82          </motion.div>
83        ))}
84      </AnimatePresence>
85    </div>
86  );
87}