axis
Specifies the scroll direction of the ScrollObserver container HTMLElement
.
Accepts
'x'
'y'
Defaults
'y'
axis code example
import { createTimer, utils, onScroll } from 'animejs';
animate('.square', {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
loop: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
axis: 'x',
})
});
<div class="scroll-container scroll-x">
<div class="scroll-content grid square-grid">
<div class="scroll-section padded">
<div class="large centered row">
<div class="label">scroll right →</div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
</div>
</div>