Animated Sections
Sections that animate in with staggered entrance transitions.
Wrap child elements to stagger their entrance with fade and slide animations.
Demo
Staggered grid entrance
1
2
3
4
5
6
7
8
9
Usage
import { AnimatedSections } from "@delphi/ui";
export function Example() {
return (
<AnimatedSections className="grid grid-cols-3 gap-4">
{items.map((item) => (
<Card key={item.id}>{item.name}</Card>
))}
</AnimatedSections>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
staggerDelay | number | 0.1 | Delay in seconds between each child's entrance |
itemDuration | number | 0.2 | Duration of each child's entrance animation |
itemClassName | string | - | Class applied to each animated item wrapper |
className | string | - | Additional CSS classes for the container |
Use for lists and grids that load content
Keep stagger delays short (0.05–0.15s) so the sequence feels snappy
Use with very large lists — stagger delay compounds and gets slow
Wrap items that are already animated individually