Stagger & Parallel

0.00s / 2.97s · F0

Stagger

Reveals children one by one, inserting a fixed delay between each child’s start time.

Props

Prop	Type	Description
staggerDelay	number	Frames between each child’s start
children	ReactNode	Animation elements to stagger

Example

<Stagger staggerDelay={10}>
  <FadeIn duration={20}>
    <Circle cx={100} cy={150} r={30} fill="#4f9eff" />
  </FadeIn>
  <FadeIn duration={20}>
    <Circle cx={200} cy={150} r={30} fill="#ff6b6b" />
  </FadeIn>
  <FadeIn duration={20}>
    <Circle cx={300} cy={150} r={30} fill="#50fa7b" />
  </FadeIn>
</Stagger>

Parallel

A semantic grouping component — all children start at the same frame. Use Parallel to mark animations that should play concurrently.

Props

Prop	Type	Description
children	ReactNode	Animation elements to run concurrently

Example

<Parallel>
  <FadeIn duration={30}>
    <Circle cx={150} cy={150} r={40} fill="#4f9eff" />
  </FadeIn>
  <Transform from={{ translateX: 100 }} to={{ translateX: 0 }} duration={30}>
    <Rect x={250} y={110} width={80} height={80} fill="#ff6b6b" />
  </Transform>
</Parallel>

Code Example

React

import { Player, Stagger, FadeIn, Rect } from '@elucim/core';

<Player width={500} height={250} fps={30} durationInFrames={90}>
  <Stagger staggerDelay={8}>
    {[0, 1, 2, 3, 4].map(i => (
      <FadeIn key={i} duration={15}>
        <Rect x={40 + i * 90} y={80} width={70} height={70}
              stroke={['#6c5ce7', '#a29bfe', '#74b9ff', '#ff6b6b', '#ffd93d'][i]}
              strokeWidth={2} rx={8} />
      </FadeIn>
    ))}
  </Stagger>
</Player>

DSL JSON

{
  "width": 500, "height": 250, "fps": 30, "durationInFrames": 90,
  "children": [
    {
      "type": "stagger", "staggerDelay": 8,
      "children": [
        { "type": "rect", "x": 40, "y": 80, "width": 70, "height": 70, "stroke": "#6c5ce7", "rx": 8, "fadeIn": { "duration": 15 } },
        { "type": "rect", "x": 130, "y": 80, "width": 70, "height": 70, "stroke": "#a29bfe", "rx": 8, "fadeIn": { "duration": 15 } },
        { "type": "rect", "x": 220, "y": 80, "width": 70, "height": 70, "stroke": "#74b9ff", "rx": 8, "fadeIn": { "duration": 15 } },
        { "type": "rect", "x": 310, "y": 80, "width": 70, "height": 70, "stroke": "#ff6b6b", "rx": 8, "fadeIn": { "duration": 15 } },
        { "type": "rect", "x": 400, "y": 80, "width": 70, "height": 70, "stroke": "#ffd93d", "rx": 8, "fadeIn": { "duration": 15 } }
      ]
    }
  ]
}