Stagger Reveal Group
A wrapper that reveals its children one after another as the group scrolls into view.
- Category
- Animations
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Line Mask Reveal
animationsReveals text one line at a time, each sliding up from behind its own clipping mask.
Page Transition Wrapper
animationsWraps route content so it animates out and the next page animates in instead of swapping instantly.
Path Follow Scroll
animationsA marker that rides an SVG curve on scroll, banking through the bends.