Stagger List

Children animate in sequence with a stagger delay. Each item fades up from slightly below.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Stagger ListChildren animate in sequence with a stagger delay. Each item fades up from slightly below.

"use client";
import { motion, type Variants } from "framer-motion";

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 10 },
  show: { opacity: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" } },
};

type StaggerListProps = {
  items: React.ReactNode[];
  stagger?: number;
};

export function StaggerList({ items, stagger = 0.09 }: StaggerListProps) {
  const containerVariants: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger } },
  };

  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="show"
      style={{ listStyle: "none", padding: 0, margin: 0 }}
    >
      {items.map((item, i) => (
        <motion.li key={i} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
itemsrequired	ReactNode[]	—	Array of items to render
stagger	number	0.09	Delay between each item in seconds