SplitType - GSAP

Split Type – https://www.npmjs.com/package/split-type

SplitType is a small javascript library that splits HTML text into elements so that lines, words, and characters can be animated independently. It was inspired by GSAP’s SplitText plugin and can be used with any animation library.

Under the hood, SplitType changes the HTML structure of the target elements, wrapping each line, word, and character in an element.

CDN

<!-- Minified UMD bundle -->
<script src="https://unpkg.com/split-type"></script>

Usage

const text = new SplitType('#target')
// or
const text = SplitType.create('#target')

// Array of line elements
text.lines
// Array of word elements
text.words
// Array of character elements
text.chars

Important: The following style should be applied to all target elements. This prevents the characters from shifting slightly when text is split/reverted.

.target {
  font-kerning: none;
}

Checkout all other options – https://www.npmjs.com/package/split-type#splittype