onUpdate
Triggers a function every time the linked object progress updates during scroll synchronisation.
Accepts
A Function
whose first argument returns the ScrollObserver instance
Default
noop
onUpdate code example
import { animate, onScroll, utils } from 'animejs';
const [ $value ] = utils.$('.value');
let updates = 0;
animate('.square', {
x: '15rem',
rotate: '1turn',
ease: 'linear',
autoplay: onScroll({
container: '.scroll-container',
enter: 'bottom-=50 top',
leave: 'top+=60 bottom',
sync: .5,
debug: true,
onUpdate: () => $value.textContent = ++updates,
})
});
<div class="scroll-container scroll-y">
<div class="scroll-content grid square-grid">
<div class="scroll-section padded sticky">
<div class="large row">
<pre class="large log row">
<span class="label">updates</span>
<span class="value">0</span>
</pre>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
<div class="scroll-section">
</div>
</div>
</div>