克隆

通过将行、单词或字符包裹在以下 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'
布尔值 (true 等同于 'center')
null

默认值

null

克隆代码示例

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>

wrap
HTML 模板