This is a wrapper to define animations in components. If the animations are not enabled the children components should render as usual. This uses react-transition-group.

Prop nameTypeDefaultDescription

Enable the animation for this component and its children.


If animatable, should component start its animation or not.


A function to render the children. It will receive an object parameter with information about the animation status, with the following properties:

  • status: string - The <Transition /> received status parameter.
  • entering: bool - Started to be shown.
  • entered: bool - Animation is completed and now is shown.
  • exiting: bool - Started to be hidden.
  • exited: bool - Animation is completed and now is hidden.

Do the animation on first mount. Passed down to <Transition />.


Animation enter and exit duration in ms. Passed down to <Transition />.

One of type: number, shape

Source code: src/Animation Open in: Playground