Brickslab.Toolsv2.1.5

@brickslab./ui-web

Displays an array of items with staggered sequential animations. Each item slides in with customizable timing, direction, and easing. Perfect for lists, notifications, and entry effects.

Aperçu

Default (Slide Up, 150ms stagger)

✓ Item 1 - Animated in
✓ Item 2 - Smooth transition
✓ Item 3 - Sequential timing

Slide Down with Longer Stagger

→ Sliding down from top
→ With 300ms stagger delay
→ Slower sequential effect

Max Visible Items (3 of 5)

Shown 1/5
Shown 2/5
Shown 3/5

Props Table

PropTypeDéfautRequisDescription
itemsReact.ReactNode[]—✓Array of items to display and animate.
delaynumber0—Initial delay before animation starts (ms).
staggernumber150—Delay between each item animation (ms).
durationnumber600—Duration of each item animation (ms).
direction"up" | "down""up"—Animation direction: "up" (slide from bottom), "down" (slide from top).
maxVisiblenumber——Limit number of visible items.
classNamestring——Container CSS class.
itemClassNamestring——CSS class for each item.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  items={<span>...</span>}
  delay={0}
  stagger={150}
  duration={600}
  direction="up"
  maxVisible={0}
  className="..."
  itemClassName="..."
/>
itemsdelaystaggerdurationdirectionmaxVisibleclassNameitemClassName

Usage

tsx
import { AnimatedList } from "@brickslab./ui-web";

const items = [
  <div>Item 1</div>,
  <div>Item 2</div>,
  <div>Item 3</div>,
];

// Default (slide up, staggered)
<AnimatedList items={items} />

// Custom stagger
<AnimatedList items={items} stagger={300} duration={800} />

// Slide down
<AnimatedList items={items} direction="down" />

// Max visible items
<AnimatedList items={items} maxVisible={3} />