TextSlicer

The TextSlicer plugin divides the text content of an HTML node into individually animatable spans categorized by characters, words, or lines. It preserves all nested HTML node structures during the slicing process.

---

Character Splitting (type: 'chars')

Setting type: 'chars' generates an individual <span> node for each character.

ANIMATE CHARS

60 FPS

---

Word Splitting (type: 'words')

Setting type: 'words' generates an individual <span> node for each word boundary.

Pop Each Word In

60 FPS

---

Line Splitting (type: 'lines')

Setting type: 'lines' calculates natural DOM text wrapping and groups words into horizontal line nodes. Note: Accurate line calculation requires passing type: 'words,lines' to compute word boundaries first.

This is a multi-line paragraph that will be automatically split. Resize your browser to see how it respects the natural text wrapping!

60 FPS

---

Timelines & Callbacks

Persisting injected <span> nodes degrades DOM performance and accessibility. The revert() method must be invoked via lifecycle callbacks (e.g., onComplete) to purge injected nodes and restore the original DOM tree state.

I will animate into view, wait half a second, fade out, and then perfectly clean up my spans.

60 FPS

---

How to use TextSlicer

The plugin is accessible via the AnimX.TextSlicer public API alias or via direct module import.

import { animate, apply } from 'animx';
import { TextSlicer } from 'animx/plugins/Text'

// 1. Split the text
const split = TextSlicer.split('.my-text', { type: 'chars,words,lines' });

// 2. Animate the arrays it provides
animate(split.chars, {
  y: 20,
  opacity: 0,
  stagger: 0.05,
  onComplete: () => {
    // 3. Clean up the DOM when done!
    split.revert();
  }
});

---

Properties

Property	Default	Description
type	`'chars,words'`	Comma separated string of what to split: `'chars'`, `'words'`, or `'lines'`.
charsClass	`'ax-char'`	Class added to character spans.
wordsClass	`'ax-word'`	Class added to word spans.
linesClass	`'ax-line'`	Class added to line spans.
aria	`true`	If true, applies aria-label to the parent and aria-hidden to spans so screen readers read the word normally instead of letter-by-letter.