EFFECTS

Text Reveal

Splits text into lines and slides each one up from behind a mask, one after another. Good for headings and intro paragraphs.

Classes

ClassPlays
fx-text-reveal-plOn page load
fx-text-reveal-stWhen the element scrolls into view
fx-text-revealAutomatically, 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], default 1.2 seconds.
  • Delay — fx-delay-[n], default 0.
  • Stagger — fx-stagger-[n], default 0.1 seconds between lines.
  • Ease — fx-ease-[name], default power3.out.
  • Start position — fx-start-[pos], default top 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.