Skip to content
react-native-strx v1.0.0-beta.1

Choreography

Strx.Timeline

Choreograph the entrances of several children at render time.

Strx.Timeline staggers or sequences the entrance animations of its direct children. It reads each child's animate, computes a start offset, and injects it as extra delay, so the children themselves stay unchanged.

1<Strx.Timeline playback="stagger" interval={80}>2  <Strx.View animate="fade-in from:translate-y-12" />3  <Strx.View animate="fade-in from:translate-y-12" />4  <Strx.View animate="fade-in from:translate-y-12" />5</Strx.Timeline>

Props

PropTypeDefaultMeaning
playback
"parallel""serial""stagger"
"parallel"
How the children are scheduled
interval
number
100
Offset in ms between children, for stagger. Negative or invalid values become 0.
playCount
number"infinite"
—
Plays the whole choreography this many times in total
children
ReactNode
—
Children whose animate props are orchestrated

Strx.Timeline renders a Strx.View, so it also accepts view props such as style, and layout props such as layoutClip.

Scheduling

  • parallel: every child starts at 0. Useful with playCount to loop a group together.
  • serial: each child starts when the previous child's delay and duration have finished.
  • stagger: child n starts at n × interval, plus the delay-* values of the children before it.

Offsets are added to each child's own delay-*, and they apply to every comma group in the child's animate:

1<Strx.Timeline playback="stagger" interval={100}>2  <Strx.Text animate="fade-in">Starts at 0ms</Strx.Text>3  <Strx.Text animate="fade-in delay-50">Starts at 150ms</Strx.Text>4  <Strx.Text animate="fade-in">Starts at 250ms (200 + the 50ms delay above)</Strx.Text>5</Strx.Timeline>

Repeating the choreography

playCount repeats the whole timeline, not each child separately. STRX spaces the cycles by the estimated duration of the full timeline:

1<Strx.Timeline playback="stagger" interval={120} playCount="infinite">2  <Dot animate="from:opacity-30 to:opacity-100 duration-400" />3  <Dot animate="from:opacity-30 to:opacity-100 duration-400" />4  <Dot animate="from:opacity-30 to:opacity-100 duration-400" />5</Strx.Timeline>

Things to know

  • Only direct children are orchestrated. Fragments, strings and null children are rendered unchanged. To orchestrate nested components, give the nested component the animate prop and pass it through, or use Strx.useTimeline.
  • Children can be any component that accepts animate: STRX components and custom components.
  • The timeline runs at render time, as the children mount. To play animations later, in response to a press or a network result, use Strx.useTimeline.
  • For a single component with several animations, use array playback.

Edit this page on GitHub

Esc