Animate

The Animate component is a wrapper component used to animate its children. It supports different animation types and a customizable timeout duration.

Usage

import { Animate } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Animate type='pop' timeout={ 500 }>
      <div>Content to animate</div>
    </Animate>
  );
}

Props

Prop	Description	Required	Value
children	children to render	required	component
type	type of animation	optional	string (slideup/slidedown/pop), default: slideup
timeout	animation duration	optional	integer, default: 300

Notes

• The Animate component uses the CSSTransition component from react-transition-group.

• The type prop specifies the animation type.

• The timeout prop sets the duration of the animation.

• Custom styles for the animations should be defined in animate.scss.