# Animate Presence

Animate Presence — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/animate-presence/

Legend Motion v2 documentation. Current documentation version.

`AnimatePresence` lets you use the `exit` prop to animate components when they unmount.

React Native does not have a built-in way to defer unmounting, so `AnimatePresence` holds onto removed components until their exit animation is finished.

Any children of `AnimatePresence` that have an `exit` prop will animate before being removed.

## [Usage](https://legend.so/motion/v2/usage/animate-presence/#usage)

```jsx
import { AnimatePresence } from "@legendapp/motion";

<AnimatePresence>
  {value ? (
    <MotionStyled.View
      key="A"
      initial={{ opacity: 0.1, x: 0 }}
      animate={{ opacity: 1, x: 100 }}
      exit={{ opacity: 0.2, x: 0 }}
      transition={{
        default: {
          type: "spring",
        },
        opacity: {
          type: "timing",
        },
      }}
    />
  ) : null}
</AnimatePresence>
```

`key` is a required prop on children of `AnimatePresence`. This is needed to make sure it is operating on the same elements.

Note that this example has an exit animation going to opacity 0.2 so you can see when it actually gets removed.

[View Markdown](https://legend.so/motion/v2/usage/animate-presence.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Animate+Presence&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fusage%2Fanimate-presence%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)