Animated List

featurefrom MagicUI Effects

Animated List

AI Usage Rules

Use AnimatedList for notification feeds, activity logs, or real-time updates. Requires motion/react. Items appear one by one with spring animation. Set delay (ms) between items.

Code Template

"use client"
import { AnimatePresence, motion } from "motion/react"
import { useEffect, useMemo, useState } from "react"
import { cn } from "@/lib/utils"

interface AnimatedListProps extends React.ComponentProps<"div"> {
  children: React.ReactNode
  delay?: number
}

export function AnimatedList({ children, className, delay = 1000, ...props }: AnimatedListProps) {
  const [index, setIndex] = useState(0)
  const childrenArray = useMemo(() => React.Children.toArray(children), [children])

  useEffect(() => {
    if (index < childrenArray.length - 1) {
      const timer = setTimeout(() => setIndex((prev) => prev + 1), delay)
      return () => clearTimeout(timer)
    }
  }, [index, childrenArray.length, delay])

  const itemsToShow = useMemo(() => childrenArray.slice(0, index + 1).reverse(), [index, childrenArray])

  return (
    <div className={cn("flex flex-col items-center gap-4", className)} {...props}>
      <AnimatePresence>
        {itemsToShow.map((item) => (
          <AnimatedListItem key={(item as React.ReactElement).key}>
            {item}
          </AnimatedListItem>
        ))}
      </AnimatePresence>
    </div>
  )
}

function AnimatedListItem({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1, originY: 0 }}
      exit={{ scale: 0, opacity: 0 }}
      transition={{ type: "spring", stiffness: 350, damping: 40 }}
      layout
      className="mx-auto w-full"
    >
      {children}
    </motion.div>
  )
}

Props Schema

Property	Type	Default	Description
delay	number	—
children	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "delay": {
      "type": "number"
    },
    "children": {
      "type": "string"
    }
  }
}