Sync WAAPI animations V4
WAAPI animations can be synchronised to a timeline using the sync() method.
timeline.sync(animation, position);Parameters
| Name | Accepts |
|---|---|
| synced | Animation | Timer | Timeline |
| position (opt) | Time position |
Returns
The timeline itself
Can be chained with other timeline methods.
Sync WAAPI animations code example
import { createTimeline, waapi } from 'animejs';
const circle = waapi.animate('.circle', {
x: '15rem',
});
const triangle = waapi.animate('.triangle', {
x: '15rem',
y: [0, '-1.5rem', 0],
ease: 'out(4)',
duration: 750,
});
const square = waapi.animate('.square', {
x: '15rem',
rotateZ: 360,
});
const tl = createTimeline()
.sync(circle, 0)
.sync(triangle, 350)
.sync(square, 250);<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>