How to create timeline animations in anime.js

Anime.js is a JavaScript animation library that allows programmers to create complex animations easily. Such animations usually require multiple moving parts. Anime.js provides the timeline object to synchronize many animations with one another.

Create a timeline object

The first step in creating a timeline animation is to create a timeline object.

The timeline() method takes the following parameters:

• targets
• duration
• delay
• endDelay
• round
• easing

Any child animations we add to the timeline object will inherit these parameters.

Note: Click here to learn about the targets parameter, and here to learn about the other parameters.

Add animations to the timeline

The next step is to add child animations to the timeline using the add() method.

The add() method takes key-value pairs of targetsThe element that we want to animate, propertiesThe visual features like color, size, and shape that we want to animate, and property parametersQualities like duration and delay that are applied to properties.

As mentioned previously, animations specified using the add() method will inherit the properties of the timeline object. However, the animation's own parameters have precedence over the inherited ones.

Example

Before exploring timeline animations further, let's look at an example. The following example involves six boxes, each moving vertically downwards.

Explanation

In the HTML section, we create six boxes using the <div> tag and style them using the box class.

In the JavaScript portion of the code, we create a timeline animation.

• Lines 1–3: We create a timeline object using the timeline() method. We pass a single parameter, duration, and set it to 500 milliseconds. All the animations we add to this timeline will inherit this duration.
• Lines 5–9: We add the first animation to the myTimeline object. It targets the element with id #box1 and sets the translateY property to 50px. Although we have not mentioned a duration for this animation, it will last 500ms because it inherits its duration from the timeline object.
• Lines 10–13: We add the second animation that targets the box with ID #box2. We set its translateY property to 100px to differentiate it from the previous animation.
• Lines 14–25: We continue with boxes 3, 4, and 5.
• Lines 26–30: We add the sixth and final animation that targets the box with id #box6. We set the duration to 6000ms. In this case, the 500ms duration inherited from the myTimeline object will be ignored.

As we can see, each box's animation occurs in the order they were added to the timeline.

Adding offsets

By default, each added animation plays one after the other. We can change this behavior by adding offsets as a second optional parameter to the add() method. There are two types of offsets:

• Relative offsets
• Absolute offsets

Relative offsets

These offsets specify when to start an animation in relation to the previous animation in the timeline. We specify relative offsets as strings beginning with '+=' or '-=' followed by the number of milliseconds.

Consider the example below:

We use the '+=' offset when we want the animation to start sometime after the previous animation and the '-=' offset when we want the animation to begin sometime before the previous animation ends.

In this case, box2 moves 500ms after box1 stops moving, while box3 moves 500ms before box2 stops moving. This causes both box2 and box3 to appear to move at the same time.

Absolute offsets

We can also pass a number as the second parameter. Now the animation will start after the specified number of milliseconds regardless of its position in the timeline.

Even though the order in which we add the animations is box1, box2, and box3. The animations occur in the reverse order due to the absolute offsets we've set.