HomeStarbucks Pattern Library

Animator

Notes

An animation utility for preset entrance/exit animations using React Transition Group. If rendering more than one child, or toggling the state of a single child, be sure each child has a unique key.

Props

  • animationoneOf('fade', 'grow', 'fadeGrow')['fadeGrow']

    The name of the animation to be applied to children. Defaults to 'fadeGrow'.

  • childrenany
  • entranceDelaynumber[100]

    Value in milliseconds before the entrance animation begins

Example: When using a single child, it will animate in when first rendered, and animates out when unmounted.

Example: Crossfade two elements by conditionally rendering. Be sure each child has a unique key, and also that the children are absolutely positioned.

Example: A single child can be animated in and out when updating props. Be sure the two states provide a unique key on the child.

Example: A list can be managed with Animator, with entrance and exit animations for new or exiting items.