wrap

Adds an extra wrapper element with the specified CSS overflow property to all split elements.

Outputs

<span style="overflow: clip; display: inline-block;">
  <span style="display: inline-block;">word</span>
</span>

Accepts

'hidden' | 'clip' | 'visible' | 'scroll' | 'auto'
Boolean (true is equivalent to 'clip')
null

Default

null

wrap code example

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

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

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

<div class="large centered row">
  <p class="text-xl">Split and wrap text.</p>
</div>
<div class="small row"></div>

Previous Next

class
clone