Animate
Interpolates every change to its object. .eases(w: spring.gentle) per property; .enter(...)/.exit(...) for mount and unmount.
Also written Anim; layr format rewrites these to Animate.
Every change moves
Animate interpolates every change to its object, whatever caused it: state, a Function, an Inject, the theme or a frame switch. By default it uses spring.gentle; ease and duration change that for everything, .eases(w: spring.bouncy) for one property.
Page(
.name(Grow)
.route('/')
var bool wide = false
Scaffold(
.config(color: canvas)
.body(
Column(
.config(gap: 14, padding: all(24))
Button(
.preset(default)
.config(label: wide ? 'Narrow' : 'Widen')
.fnc { wide = !wide }
)
Animate(
Container(
.config(
w: wide ? 300 : 120
h: 60
color: wide ? teal : accent
cornerRadius: wide ? 30 : 12
)
)
)
)
)
)
)Enter and exit
.enter(...) plays when the object appears and .exit(...) when it goes: fade, scale and slide.
Page(
.name(Toast)
.route('/')
var bool shown = false
Scaffold(
.config(color: canvas)
.body(
Column(
.config(gap: 14, padding: all(24))
Button(
.preset(default)
.config(label: shown ? 'Dismiss' : 'Show toast')
.fnc { shown = !shown }
)
If(
.cnd(shown)
.obj(
Animate(
.enter(fade, slide(y: 12))
.exit(fade)
.obj(
Container(
.config(
.border(color: line, width: 1)
color: panel
cornerRadius: 12
padding: sym(x: 16, y: 12)
)
.obj(Text('Booking saved'))
)
)
)
)
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
duration | time | 300ms | Duration for eased (non-spring) transitions. |
ease | motion | spring.gentle | Default motion for all properties: an ease or a spring. |
delay | time | Delay before transitions start. | |
motion | respect | always | respect | Respect reduced-motion preferences (default) or always animate. |
resize | follow | animate | follow | Continuous window resizes follow instantly (default) or animate. |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.obj: one object, the default slot