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.

​
MotionNode

MotionNode is the renderer component behind ui.motion, ui.motionDiv, ui.motionRow, ui.motionStack, ui.motionList, ui.motionListItem, ui.motionSection, ui.motionButton, and ui.motionText. 
ui.motionDiv({
  initial = {
    opacity = 0,
    y = 8
  },
  animate = {
    opacity = 1,
    y = 0
  },
  exit = {
    opacity = 0,
    y = -8
  },
  transition = {
    duration = 0.2,
    ease = 'easeOut'
  }
}, function()
  ui.text('Ready')
end)

​
APIs

HelperDefault element
ui.motion(props?, children?)div
ui.motionDiv(props?, children?)div
ui.motionRow(props?, children?)div with row-like base class.
ui.motionStack(props?, children?)div with stack-like base class.
ui.motionList(props?, children?)ul
ui.motionListItem(props?, children?)li
ui.motionItem(props?, children?)Alias for motionListItem.
ui.motionSection(props?, children?)section
ui.motionButton(label, onPress, props?)button
ui.motionText(value, props?)p
Declarative helpers are available on lui with the same names.

​
Motion props

MotionNode forwards these Framer Motion props when present: animate, custom, drag, dragConstraints, dragElastic, dragMomentum, exit, initial, layout, layoutDependency, layoutId, transition, variants, whileDrag, whileFocus, whileHover, whileInView, and whileTap.

​
Element and action props

PropTypeDescription
as'article' | 'button' | 'div' | 'li' | 'p' | 'section' | 'span' | 'ul'Motion element. Invalid values fall back to div.
classBasestringBase class used before className.
labelstring | reactive getterUsed by motionButton and motionText when there are no children.
onPressfunction(payload)Used by motionButton; click events route through LUI event handling.
icon, iconComponent, startIcon, endIconiconIcon slots for button-like motion nodes.
iconPosition'start' | 'end'Moves primary icon to the end.
If a MotionNode has children, it renders the children. If it has no children, it renders label and icon slots.