Skip to main content

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

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

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

​
Props

PropTypeDescription
initialbooleanPassed to AnimatePresence.
mode'sync' | 'wait' | 'popLayout'Presence mode. Invalid values are ignored.
customanyCustom data passed to Framer Motion.
presenceAffectsLayoutbooleanPassed through when boolean.
propagatebooleanPassed through when boolean.
Use stable keys for lists. ui.foreach(..., { keyBy = 'id' }) is the easiest path for animated list items.