words

Defines if and how the words should be split.
Split word elements are accessed via an array returned by the words property of a TextSplit instance.

const { words } = splitText(target, { words: true });

Internally, for browsers that support it, word splitting is done using the native Intl.Segmenter object, allowing splitting words for languages that don't use spaces, like Japanese, Chinese, Thai, Lao, Khmer, Myanmar, etc, and falls back to using String.prototype.split() for older browsers.

Default split wrappers

By default, each word is wrapped in a span element with the following styles and data attributes:

<span style="display: inline-block;" data-line="0" data-word="0">Split</span>
<span style="display: inline-block;" data-line="0" data-word="1">by</span>
<span style="display: inline-block;" data-line="0" data-word="2">words</span>

Custom split wrappers

Split wrappers can be configured by passing an Object of Split parameters or by passing a custom HTML template String.

Animating words when also splitting by lines

Each line split overrides existing word elements, which causes running word animations to stop once the fonts have loaded or every time the text element resizes.
Declaring an animation within the split.addEffect() method ensures continuous playback between resizes and automatically reverts it when using split.revert().

const split = splitText(target, params);

split.addEffect(({ lines, words, chars }) => animate([lines, words, chars], {
  opacity: { from: 0 },
}));

split.revert(); // This also reverts the animation declared with addEffect

Accepts

Boolean
Object of Split parameters
HTML template String

Default

true

words code example

import { animate, splitText, stagger } from 'animejs';

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

animate(words, {
  y: [
    { to: ['100%', '0%'] },
    { to: '-100%', delay: 750, ease: 'in(3)' }
  ],
  duration: 750,
  ease: 'out(3)',
  delay: stagger(100),
  loop: true,
});

<div class="large centered row">
  <p class="text-xl">Split text by words.<br>単語ごとに分割します。</p>
</div>
<div class="small row"></div>

Previous Next

lines
chars