Animated Group

Staggers children entrance on mount. Each child wraps in a motion.div with configurable initial and animate variants.

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.

Animated GroupStaggers children entrance on mount. Each child wraps in a motion.div with configurable initial and animate variants.

"use client";
import React from "react";
import { motion } from "framer-motion";

type AnimatedGroupProps = {
  children: React.ReactNode;
  staggerDelay?: number;
  initial?: Variant;
  animate?: Variant;
};

export function AnimatedGroup({
  children,
  staggerDelay = 0.1,
  initial,
  animate,
}: AnimatedGroupProps) {
  const childArray = React.Children.toArray(children);
  return (
    <motion.div
      className="mp-animated-group"
      initial="hidden"
      animate="show"
      variants={{
        hidden: {},
        show: { transition: { staggerChildren: staggerDelay } },
      }}
    >
      {childArray.map((child, i) => (
        <motion.div
          key={i}
          variants={{
            hidden: initial ?? { opacity: 0, y: 16 },
            show: animate ?? {
              opacity: 1,
              y: 0,
              transition: { duration: 0.4, ease: "easeOut" },
            },
          }}
        >
          {child}
        </motion.div>
      ))}
    </motion.div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Elements to stagger in
staggerDelay	number	0.1	Delay between each child in seconds
initial	Variant	opacity:0 y:16	Initial state for each child
animate	Variant	opacity:1 y:0	Animate state for each child