Example #1 | Timeline

Timeline Basics

Timelines let you synchronise multiple animations together. By default each animation added to the timeline starts after the previous animation ends.

• • anime.timeline(): creates a new timeline with specified easing and duration parameters.
  • tl.add(): is then used to add children animations to the timeline, each specifying its targets and properties to animate.

CODE 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,
        });