> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Presence

> AnimatePresence wrapper for enter and exit transitions

# Presence

`Presence` wraps children in Framer Motion `AnimatePresence`. Use it around conditional or list-rendered motion nodes so exiting children can animate out.

```lua theme={"dark"}
ui.presence({
  initial = false,
  mode = 'popLayout'
}, function()
  ui.foreach(notices, function(notice, _, itemUi)
    itemUi.motionDiv({
      layout = true,
      initial = { opacity = 0, x = 36 },
      animate = { opacity = 1, x = 0 },
      exit = { opacity = 0, x = 36 }
    }, function()
      itemUi.text(notice.message)
    end)
  end, {
    keyBy = 'id'
  })
end)
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.presence(props?, children?)
  ui.animatePresence(props?, children?)
  ```

  ```lua Declarative theme={"dark"}
  lui.presence(props?, children?)
  lui.animatePresence(props?, children?)
  ```
</CodeGroup>

## Props

| Prop                    | Type                              | Description                                |
| ----------------------- | --------------------------------- | ------------------------------------------ |
| `initial`               | `boolean`                         | Passed to AnimatePresence.                 |
| `mode`                  | `'sync' \| 'wait' \| 'popLayout'` | Presence mode. Invalid values are ignored. |
| `custom`                | `any`                             | Custom data passed to Framer Motion.       |
| `presenceAffectsLayout` | `boolean`                         | Passed through when boolean.               |
| `propagate`             | `boolean`                         | Passed through when boolean.               |

<Tip>
  Use stable keys for lists. `ui.foreach(..., { keyBy = 'id' })` is the easiest path for animated list items.
</Tip>