onSyncComplete
Triggers a function when the linked object synchronisation completes.
Accepts
A Function
whose first argument returns the ScrollObserver instance
Default
noop
onSyncComplete code example
import { animate, onScroll, utils } from 'animejs';
const [ $value ] = utils.$('.value');
let completions = 0;
animate('.square', {
x: '15rem',
rotate: '1turn',
ease: 'linear',
autoplay: onScroll({
container: '.scroll-container',
enter: 'bottom top',
leave: 'center bottom',
sync: .5,
debug: true,
onSyncComplete: () => $value.textContent = ++completions,
})
});
<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">completions</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>