平滑滚动

通过传递一个介于 0 和 1 之间的值，将关联对象的播放进度平滑地动画化到滚动位置。值越接近 0，动画追赶当前滚动位置所需的时间就越长。

接受

一个大于或等于 0 并且小于或等于 1 的 数字

平滑滚动代码示例

import { animate, onScroll } from 'animejs';

animate('.square', {
  x: '15rem',
  rotate: '1turn',
  ease: 'linear',
  autoplay: onScroll({
    container: '.scroll-container',
    enter: 'bottom-=50 top',
    leave: 'top+=60 bottom',
    sync: .25,
    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>