> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/animate.md).

# Animate

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

### Usage

```javascript
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`.