Choreography
Array playback
Run several animations on one component in parallel, one after another, or staggered.
Pass an array to animate to combine several animations on one component. The playback prop decides how the entries are scheduled.
1<Strx.View2 playback="serial"3 animate={["fade-in duration-200", "scale-in duration-300"]}4/>Playback modes
playback | Behavior |
|---|---|
parallel (default) | All entries start together, like comma groups. |
serial | Each entry starts after the previous entry's delay-* and duration have finished. |
stagger | Entries start at interval ms offsets. Explicit delay-* values of earlier entries push later entries back too. |
interval defaults to 100 ms and only applies to stagger.
1<Strx.View2 playback="stagger"3 interval={80}4 animate={["fade-in", "from:translate-y-12", "from:scale-90 spring"]}5/>Arrays vs. comma groups
Both run several animations, and in parallel mode they behave the same:
<Strx.View animate="fade-in, slide-up duration-500" />
<Strx.View animate={["fade-in", "slide-up duration-500"]} />Arrays are useful when you need serial or stagger, when entries are objects, or when you build the list in code:
1const entrance = [2 "fade-in duration-200",3 { from: { backgroundColor: "#ffffff" }, to: { backgroundColor: "#eef1ff" }, duration: 400 },4];56<Strx.View playback="serial" animate={entrance} />;Same channel in two entries
If two entries animate the same channel, the later entry wins for that channel. In serial and stagger mode, the later entry takes over when it starts.
Several components
playback schedules entries on one component. To schedule several components, wrap them in Strx.Timeline for render-time choreography, or use Strx.useTimeline to play them from an event.