Transitions
Built-in Transitions
Available by name, no import:
| Name | Params (all optional) |
|---|---|
fade | delay, duration |
fly | delay, duration, x, y, opacity |
scale | delay, duration, start, opacity |
slide | delay, duration (animates height + vertical padding/margin) |
draw | delay, duration | speed (traces an SVG path via stroke-dashoffset) |
<transition in="fly({ y: 40, duration: 600 })" out="fade"><p>…</p></transition>
Easings
Every built-in also takes easing — the name of an easing (params are serialized, so
pass a string, not a function). The full set lives on olum.easings: linear plus
sine/quad/cubic/quart/quint/expo/circ/back/elastic/bounce, each with an
In, Out, and InOut variant (e.g. quintOut, bounceInOut, backIn).
<transition in="fly({ y: 40, easing: 'bounceOut' })"><p>…</p></transition>