最小值最大值
定义了可用滚动空间中的最小或最大阈值。这在某些情况下特别有用,例如当某些目标元素的初始位置过小或过大,无法触发 enter
和 leave
条件时。
接受
值 | 描述 |
---|---|
'min' |
满足进入或离开条件的最小值 |
'max' |
满足进入或离开条件的最大值 |
最小最大值代码示例
import { animate, onScroll, utils } from 'animejs';
utils.$('.square').forEach($square => {
animate($square, {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
sync: 1,
enter: 'max bottom',
leave: 'min top',
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="square"></div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
</div>
</div>