What are the TIMELINE BASICS in Anime.js?

Anime.js - Interview Questions and Answers

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,
});â€‹