Splits text into lines and slides each one up from behind a mask, one after another. Good for headings and intro paragraphs.
Classes
| Class | Plays |
|---|---|
fx-text-reveal-pl | On page load |
fx-text-reveal-st | When the element scrolls into view |
fx-text-reveal | Automatically, when its section scrolls into view (no suffix, must sit inside a <section> or your configured section selector) |
Options that matter
- Duration —
fx-duration-[n], default1.2seconds. - Delay —
fx-delay-[n], default0. - Stagger —
fx-stagger-[n], default0.1seconds between lines. - Ease —
fx-ease-[name], defaultpower3.out. - Start position —
fx-start-[pos], defaulttop 85%(scroll-triggered only).
If the block contains other block-level elements (a Group with nested blocks, for example), Text Reveal only splits the text-bearing children (headings, paragraphs, blockquotes) so it doesn't break interactive content inside.
Example
<h2 class="fx-text-reveal-st fx-duration-[1.5] fx-stagger-[0.08]">
Every line slides up from its mask
</h2>
See Modifier Classes for the full syntax and Trigger Modes for how -pl/-st/bare classes work.