clone

Clones the split elements in the specified direction by wrapping the lines, words, or characters within the following HTML structure and setting the top and left CSS properties accordingly.

Outputs

<span style="position: relative; display: inline-block;">
  <span style="display: inline-block;">word</span>
  <span style="position: absolute; top: 100%; left: 0px; white-space: nowrap; display: inline-block;">word</span>
</span>

Accepts

'left' | 'top' | 'right' | 'bottom' | 'center'
Boolean (true is equivalent to 'center')
null

Default

null

clone code example

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

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

createTimeline()
.add(chars, {
  y: '-100%',
  loop: true,
  loopDelay: 350,
  duration: 750,
  ease: 'inOut(2)',
}, stagger(150, { from: 'center' }));

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

Previous Next