# AnimatedPresence

Just like in real life, nothing appears out of nowhere. Animate elements that
get added or removed from the React tree with AnimatedPresence. If more than 1
element gets added, there will be a delay between each new element.

## Accessibility

AnimatedPresence respects the
[`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
setting. If the user has this enabled, the animations will be disabled and the
elements will show/hide instantly.


## Configuration

### Conditional rendering

Hide and show elements with a transition to add emphasis on the change. This is
useful for UX which has a different part of the UI hidden until the user takes
an action to show them.

```tsx
<AnimatedPresence>{show && <div>Item</div>}</AnimatedPresence>
```

See the
[Basic](/storybook/web/?path=/story/components-utilities-animatedpresence--basic)
example for a live demo.

> **WARNING:** When using AnimatedPresence with conditional rendering, elements will be added
> and removed from the DOM causing shifts in the layout, with the potential for frames where neither the entering nor exiting element is yet present.
>
> This can create undesirable visual jumps in some scenarios, such as when the
> element's height is what creates enough vertical space to require scrolling. The
> layout will have to be stabilized with something such as a min-height to avoid
> this.

### List rendering

Animate items in a list as they are added or removed.

```tsx
<AnimatedPresence>
  {items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</AnimatedPresence>
```

See the
[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
example for a live demo.

### Animate on mount

Set the `initial` prop to `true` to animate the element whenever it initially
renders on the screen. See this in action on the
[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
example.

```tsx
<AnimatedPresence initial={true}>...</AnimatedPresence>
```


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `initial` | `boolean` | No | — | Whether or not to animate the children on mount. By default it's set to false. |
| `transition` | `"fromBottom" | "fromTop" | "fromLeft" | "fromRight" | "popIn" | "fromLeftToRight" | "fromRightToLeft" | "fade"` | No | — | The type of transition you can use. |
