chars

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

const { chars } = text.split(target, { chars: true });

Default split wrappers

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

<span style="display: inline-block;" data-line="0" data-word="0" data-char="0">H</span>
<span style="display: inline-block;" data-line="0" data-word="0" data-char="1">E</span>
<span style="display: inline-block;" data-line="0" data-word="0" data-char="2">Y</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 chars when also splitting by lines

Each line split overrides existing character elements, which causes running character 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 = text.split(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

false

chars code example

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

const { chars } = text.split('p', {
  chars: { wrap: 'clip' },
});

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

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

Previous Next

words
debug