Arwes LogotypeArwes Logotext

Animator Managers

Direct children nodes inside a parent node can transition with different kinds of managers. A manager is a function which determines when the children nodes should transition on parent flow changes.

There are parallel (default), stagger, sequence and custom function managers.

Taking the example of the animated <Menu/> and <Item/> components, the menu can make its children items to transition in staggering using the duration.stagger default time.

<Menu animator={{ manager: 'stagger' }}>
<Item>Menu Item 1</Item>
<Item>Menu Item 2</Item>
<Item>Menu Item 3</Item>

A complete example can look like:

  • Menu Item 1
  • Menu Item 2
  • Menu Item 3

Now the children items enter in staggering animation.