debug

Toggles debug CSS styles on the split elements to better visualize the wrapper elements.
Lines are outlined in green, words in red, characters in blue.

text.split(target, { debug: true });

Accepts

Boolean

Default

false

debug code example

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

const [ $button ] = utils.$('button');
const [ $p ] = utils.$('p');

let debug = false;
let split;

const toggleDebug = () => {
  if (split) split.revert();
  debug = !debug;
  split = text.split($p, {
    lines: true,
    chars: true,
    words: true,
    debug: debug,
  });
}

toggleDebug();

$button.addEventListener('click', toggleDebug);

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

Previous Next

chars
includeSpaces