link()

将动画、定时器或时间线连接到 ScrollObserver 实例。
这等同于在 autoplay 参数上定义 onScroll() 实例。

一次只能链接一个对象，每次调用 link() 都会覆盖之前链接的对象。

接受

ScrollObserver 本身

link() 代码示例

import { animate, onScroll } from 'animejs';

const animation = animate('.square', {
  x: '15rem',
  rotate: '1turn',
  ease: 'linear',
});

const scrollObserver = onScroll({
  container: '.scroll-container',
  enter: 'bottom-=50 top',
  leave: 'top+=60 bottom',
  sync: true,
  debug: true,
});

scrollObserver.link(animation);

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

上一个 下一个

Anime.js | JavaScript 动画引擎

link()

接受

返回

link() 代码示例