Staggered entrance

Stagger the entrance of multiple elements in sequence.

Props

children

Required
Description

Any valid react child with an entrance motion somewhere in the tree as a descendant.

TypeJSX.Element | JSX.Element[]

column

Description

Index of the column. Useful if you want to have columns inside separate containers. Starts from 0.

Typenumber

columns

Description

Number of columns the children elements will be displayed over. Use "responsive" to have it calculate dynamically on the client side.

NOTE: This has a big caveat that the elements will be invisible until the client side Javascript executes. If you have a fixed grid or list, set this to a specific number. Defaults to "responsive".

Default"responsive"
Typenumber | "responsive"

delayStep

Description

Delay in ms. How long each element group will be staggered. This will be multipled by the column and row of the element. Defaults to 50.

Default50
Typenumber
Was this page helpful?
We use this feedback to improve our documentation.
  • Design system
    • Get started
    • Foundations
    • Components
    • Rovo UI
    • Tools
    • Release phases
    • Contact us
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License