splitText()

A lightweight, responsive and accessible text utility function to split, clone and wrap lines, words and characters of an HTML Element.

Text splits are created using the splitText() function.

import { splitText } from 'animejs';

const split = splitText(target, parameters);

Since v4.2.0, the splitText() method can also be imported independently without importing the entire library.

import { splitText } from 'animejs/text';

Parameters

Name	Accepts
target	A valid CSS selector `String` \| `HTMLElement`
parameters ^(opt)	An `Object` of TextSplitter settings

Returns

TextSplitter

splitText() code example

import { createTimeline, stagger, utils, splitText } from 'animejs';

const { words, chars } = splitText('p', {
  words: { wrap: 'clip' },
  chars: true,
});

createTimeline({
  loop: true,
  defaults: { ease: 'inOut(3)', duration: 650 }
})
.add(words, {
  y: [$el => +$el.dataset.line % 2 ? '100%' : '-100%', '0%'],
}, stagger(125))
.add(chars, {
  y: $el => +$el.dataset.line % 2 ? '100%' : '-100%',
}, stagger(10, { from: 'random' }))
.init();

<div class="large centered grid square-grid">
  <p class="text-xl">
    All-in-one text splitter<br>
    テキストスプリッター
  </p>
</div>

#text-split .text-xl {
  font-size: 1.5rem;
  color: currentColor;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

In this section

Previous Next