Stagger Reveal Group
A wrapper that reveals its children one after another as the group scrolls into view.
DOM + CSS1 dep1 file · 1 KB TSXreduced-motion aware
Props
"use client";
import { Children, isValidElement } from "react";
import { motion, useReducedMotion, type Variants } from "framer-motion";
import type { ReactNode } from "react";
export function StaggerRevealGroup({
children,
stagger = 0.08,
duration = 0.5,
direction = "up",
once = true,
}: {
children: ReactNode;
stagger?: number;
duration?: number;
direction?: "up" | "down" | "left" | "right";
once?: boolean;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this animation
Stagger Reveal Group animates only opacity and a transform translate on each child — compositor-cheap, no layout or paint cost per frame. Reach for it instead of a plain CSS transition whenever a list of N children needs a calculated per-item delay: Framer's staggerChildren derives that delay automatically from one stagger value, rather than hand-authoring animation-delay: calc(var(--i) * 80ms) on every child. The non-obvious part is the split responsibility — each child gets wrapped in its own motion.div carrying the item variant, but only the parent needs a whileInView trigger; the parent's variants object orchestrates all the timing. The caveat: Children.map only clones direct children that are valid React elements, so deeply nested content, fragments, or raw text passed as a child won't inherit the stagger and will simply render unanimated alongside the rest.
