Time offsets can be specified with a second optional parameter using the timeline .add() function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.
An offset can be relative to the last animation or absolute to the whole timeline.
| Type |
Offset |
Example |
Infos |
| String |
'+=' |
'+=200' |
Starts 200ms after the previous animation ends |
| String |
'-=' |
'-=200' |
Starts 200ms before the previous animation ends |
| Number |
Number |
100 |
Starts at 100ms, reagardless of the animtion position in the timeline |
Example :
// Create a timeline with default parameters
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
tl
.add({
targets: '.offsets-demo .el.square',
translateX: 250,
})
.add({
targets: '.offsets-demo .el.circle',
translateX: 250,
}, '-=600') // relative offset
.add({
targets: '.offsets-demo .el.triangle',
translateX: 250,
}, 400); // absolute offset​
