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.


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

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

  • childrenany

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

This card has both entrance and exit animations.

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

Loading animation

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

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

Card number 0

Card number 1