class

Specifies a custom CSS class applied to all split elements.

Outputs

<span class="my-custom-class" style="display: inline-block;">
  <span style="display: inline-block;">word</span>
</span>

Accepts

String
null

Default

null

class code example

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

text.split('p', {
  chars: { class: 'split-char' },
});

animate('.split-char', {
  y: ['0rem', '-1rem', '0rem'],
  loop: true,
  delay: stagger(100)
});

<div class="large centered row">
  <p class="text-xl">Custom CSS class.</p>
</div>
<div class="small row"></div>

.split-char {
  color: var(--hex-current-1);
  background-color: var(--hex-current-3);
  outline: 1px solid var(--hex-current-2);
  border-radius: .25rem;
}

Previous Next

Split parameters
wrap