vl-enter
fade-up on view
Attribute Reference
Velora motion is declared with vl-* HTML attributes. Prefer channelsfor new work. Each section includes a live frame — Test here.
Channels (preferred)
Scroll inside the frame to trigger view-linked motion. Use Replay to run again.
vl-hover
Hover this card
vl-enter="fade-up" · vl-hover="hover-lift"vl-in-view gate
Temporal gate — descendant motion replays when the gate re-enters the scrollport. Requires container-type: style (Chrome 128+, Safari 18+); otherwisevl-in-view is inert and children animate on their own timelines.
Scroll inside the frame to trigger view-linked motion. Use Replay to run again.
Replay on re-entry
Scroll away, scroll back, or press Replay
<div vl-in-view><p vl-enter="blur-in" vl-timeline="view">…</p></div>Quick Reference
| Attribute | Type | Brief |
|---|---|---|
vl-enter | tokens | Entrance preset (preferred) |
vl-exit | tokens | Exit preset |
vl-scroll | tokens | Scroll-linked motion |
vl-hover | tokens | Hover / focus interaction |
vl-effect | tokens | Legacy / composite escape hatch |
vl-timeline | enum | view, scroll, auto, hover, state |
vl-in-view | boolean | Viewport gate for descendant motion |
vl-scene / vl-stage | track + stage | Scene engine |
vl-act / vl-span | number | Scene beat index and span |
vl-pin / vl-scrub | number / boolean | Pin+scrub track |
vl-motion | enum | Subtree motion mode |
vl-page-transition | enum | MPA transition on <html> |
Scene engine
Scroll inside the frame to trigger view-linked motion. Use Replay to run again.
Title act
Scroll-linked child
vl-scene + vl-stage + vl-act