Sync timelines V4
Timelines can be synchronised to an other timeline using the sync() method.
timelineA.sync(timelineB, position);Parameters
| Name | Accepts |
|---|---|
| synced | Animation | Timer | Timeline |
| position (opt) | Time position |
Returns
The timeline itself
Can be chained with other timeline methods.
Sync timelines code example
import { createTimeline, animate } from 'animejs';
const circleAnimation = animate('.circle', {
x: '15rem'
});
const tlA = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
x: '15rem',
duration: 2000,
})
.add('.square', {
x: '15rem',
});
const tlB = createTimeline({ defaults: { duration: 2000 } })
.add(['.triangle', '.square'], {
rotate: 360,
}, 0)
.add('.circle', {
scale: [1, 1.5, 1],
}, 0);
const tlMain = createTimeline()
.sync(tlA)
.sync(tlB, '-=2000');<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>