Numeric values
Defines an offset from the top of the target and container by passing a numeric values.
If no unit is defined, the values is interpreted as pixels.
Accepts
| Type | Example | Description |
|---|---|---|
| Number | 100 |
100px from the top of the target or container |
| Unit | '1rem' |
1rem from the top of the target or container |
| Percentage | '10%' |
10% of the target or container height, from the top of the target or container |
Default unit
px
Numeric values code example
import { animate, onScroll } from 'animejs';
animate('.square', {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
loop: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
// -48px from the top of the target, 80px from the top of the container
enter: '80 -48',
// 250% from the top of the target, 67.5% from the top of the container
leave: '67.5% 250%',
debug: true
})
});<div class="scroll-container scroll-y">
<div class="scroll-content grid square-grid">
<div class="scroll-section padded">
<div class="large centered 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>