克隆

通过在以下 HTML 结构中包裹行、单词或字符，并相应地设置 top 和 left CSS 属性，沿指定方向克隆分割后的元素。

输出

<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>

接受

'left'（左） | 'top'（上） | 'right'（右） | 'bottom'（下） | 'center'（居中）
Boolean（布尔值）（true 等同于 'center'）
null

默认值

null

clone 代码示例

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

const { chars } = splitText('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>