方法名称

定义当特定回调被触发时要调用的关联 Object 的方法名称列表。

接受

一个 String，其中包含以空格分隔的动画方法、计时器方法或时间轴方法的名称列表。

回调定义顺序

`'enter'`

定义当进入阈值被跨越或元素重新进入视口时触发的方法。

{
  sync: 'play',
}

`'enter leave'`

定义当进入和离开阈值被跨越时触发的方法。

{
  sync: 'play pause',
}

`'enterForward leaveForward enterBackward leaveBackward'`

定义在向前滚动时跨越进入和离开阈值，以及在向后滚动时跨越进入和离开阈值时触发的方法。

{
  sync: 'play pause reverse reset',
}

默认值

'play pause'

方法名称代码示例

import { animate, onScroll } from 'animejs';

animate('.square', {
  x: '15rem',
  rotate: '1turn',
  duration: 2000,
  autoplay: onScroll({
    container: '.scroll-container',
    enter: 'bottom-=50 top',
    leave: 'top+=60 bottom',
    sync: 'resume pause reverse reset',
    debug: true
  })
});

<div class="scroll-container scroll-y">
  <div class="scroll-content grid square-grid">
    <div class="scroll-section padded">
      <div class="large row">
        <div class="label">scroll down</div>
      </div>
    </div>
    <div class="scroll-section padded">
      <div class="large row">
        <div class="square"></div>
      </div>
    </div>
    <div class="scroll-section">
    </div>
  </div>
</div>