Stagger: Choreographed Sequence & Index Offsets in React
Stagger animations introduce visual rhythm and directional flow to complex interfaces by animating a series of related elements with calculated time delays. Whether revealing cards in a bento grid, displaying search results, or staggering navigation menu items, manual CSS animation-delay calculations quickly become unmaintainable when list items change dynamically. ExodeUI provides built-in stagger orchestration that automatically computes entrance curves based on child index, grid coordinates, or distance from the user cursor.
ExodeUI handles stagger arrays via GPU batch rendering. Instead of instantiating dozens of individual animation interval timers on the React thread, all elements advance along a single master playhead with uniform offset math.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React from 'react';
import { ExodeUICanvas } from 'exodeui';
export function StaggeredBentoGrid() {
return (
<div className="bento-container">
<ExodeUICanvas
src="/scenes/bento-stagger.json"
stateMachine="BentoReveal"
inputs={{
"staggerOffset": 0.08, // 80ms delay between elements
"staggerDirection": "radial", // center-outward reveal
"triggerReveal": true
}}
/>
</div>
);
}Frequently Asked Questions about stagger
Can ExodeUI stagger elements radially from the point of user interaction?
Yes. ExodeUI supports radial, center-outward, and edge-to-edge stagger orders calculated from the exact X/Y coordinate of a user click or pointer entry.
How do dynamic lists handle stagger when new items are added?
The visual state machine dynamically recalculates index offsets for new incoming items without restarting or interrupting elements currently mid-animation.
How does ExodeUI stagger performance compare to Framer Motion variants?
Framer Motion evaluates stagger variants by propagating state down React component subtrees. ExodeUI performs stagger transformations directly in compiled WebGL instances, eliminating virtual DOM overhead.