EFFECTS

Split Words

Splits text into words and reveals them one after another, rising and fading in — softer than Text Reveal's line-by-line mask.

Classes

ClassPlays
fx-split-words-plOn page load
fx-split-words-stWhen the element scrolls into view
fx-split-wordsAutomatically, when its section scrolls into view

Options that matter

  • Duration — fx-duration-[n], default 0.8 seconds.
  • Delay — fx-delay-[n], default 0.
  • Stagger — fx-stagger-[n], default 0.05 seconds between words.
  • Ease — fx-ease-[name], default power3.out.
  • Start position — fx-start-[pos], default top 85% (scroll-triggered only).

The rise distance (30px) can only be changed from JavaScript — see JavaScript API.

Example

<p class="fx-split-words-st fx-stagger-[0.08]">Words rise in one by one.</p>