Timelines let you synchronise multiple animations together.
By default each animation added to the timeline starts after the previous animation ends.
Creating a timeline :
var myTimeline = anime.timeline(parameters);
| Argument |
Type |
Info |
Required |
parameters |
Object |
The default parameters of the timeline inherited by children |
No |
Adding animations to a timeline :
myTimeline.add(parameters, offset);
| Argument |
Types |
Info |
Required |
parameters |
Object |
The child animation parameters, override the timeline default parameters |
Yes |
time offset |
String or Number |
Check out the Timeline offsets section |
No |
Example :
// Create a timeline with default parameters
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
// Add children
tl
.add({
targets: '.basic-timeline-demo .el.square',
translateX: 250,
})
.add({
targets: '.basic-timeline-demo .el.circle',
translateX: 250,
})
.add({
targets: '.basic-timeline-demo .el.triangle',
translateX: 250,
});
