Skip to main content

SplitText

SplitText splits text within a container into individual lines, words, and letters.

Features:

  • Supports resizing with automatic resplitting.
  • Dynamic content is fully preserved — initial DOM nodes are saved and can be restored on destroy.
  • Correctly handles HTML, emojis, multibyte symbols, <br> tags and &nbsp;.
note

Apply fontKerning: none to prevent layout shifts.

Basic Demo​

More demos​

To explore more demos, click here.

Performance​

Performance

SplitText is extremely fast, but keep in mind that splitting into letters generates a large number of DOM nodes.
For best performance, apply splitting only to short text blocks (headlines, captions).

SplitText is a fast alternative to GSAP SplitText or split-type.

See performance comparison of:

Best Practices​

  • Avoid applying animations directly to the container — animate the generated lines/words/letters instead.
  • For perfectly stable line splitting, set font-kerning: none and ensure fonts are fully loaded before initialization.
  • Inline formatting tags (e.g., <strong>, <em>) are supported, but heavy nested markup may affect line detection accuracy.

Initialization​

Resizing Behavior

SplitText automatically recalculates lines on every resize.

SplitText is easy to initialize:

<div id="quote">
  Vevet <b>SplitText</b> is a <u>flexible</u> utility that enables seamless text <button>splitting</button>
  into words, letters, or lines as needed.
</div>
import { SplitText } from "vevet";

const text = new SplitText({
  container: document.getElementById("quote"),
  letters: true
});

Manual splitting (supported for lines only):

text.split();

Add animation:

import { SplitText } from "vevet";
import { animate, stagger } from "animejs";

const text = new SplitText(
  {
    container: document.getElementById("quote"),
    letters: true
  },
  {
    onSplit: (data, { letters }) => {
      animate(letters, {
        duration: 800,
        opacity: { from: 0, to: 1 },
        ease: "outBack",
        delay: stagger(12),
        y: { from: -50, to: 0 },
        rotateX: { from: 270, to: 0 }
      });
    }
  }
);

Destroy the SplitText instance:

text.destroy();