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.

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

Builder

ui.presence(props?, children?)
ui.animatePresence(props?, children?)

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.

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