Eased scroll
Applies an easing function to the synchronised playback progress of the linked object relative to the scroll position.
Accepts
Eased scroll code example
import { animate, stagger, onScroll } from 'animejs';
animate('.square', {
x: '12rem',
rotate: '1turn',
ease: 'linear',
delay: stagger(100, { from: 'last' }),
autoplay: onScroll({
container: '.scroll-container',
enter: 'bottom-=50 top',
leave: 'top+=60 bottom',
sync: 'inOutCirc',
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 class="square"></div>
</div>
</div>
<div class="scroll-section">
</div>
</div>
</div>