What are duration, delay, and end delay parameters in Anime.js?

What is Anime.js?

Anime.js is a JavaScript animation library that simplifies creating animations. The anime() function takes an object parameter composed of several key-value pairsPairs of two related elements 'key' and 'value' where the key defines the value..

Note: If you are unfamiliar with Anime.js, click here to learn the basics.

The duration, delay, and endDelay parameters are three of these key-value pairs we can use to control the timing of the animation. These three parameters fall under property parametersParameters that specify certain qualities of the animation in Anime.js.

Note: Check out other property parameters at this link.

The duration parameter

This parameter defines the total time that the animation takes in milliseconds.

Explanation

We consider two boxes made using the <div> tag for this example and the following. Moreover, we animate each box separately by using the anime() function, and we set it to move vertically downwards.

• Line 5: We set the duration property of the first box's animation to 5000 milliseconds (5 seconds).
• Line 11: We set the duration property of the second box's animation to 15000 milliseconds (15 seconds).

As we can see, the second box with a larger duration takes more time to complete its animation.

The delay parameter

This parameter specifies the time to wait before starting the animation. The value is given in milliseconds.

Explanation

We continue the same example but set each animation's duration to be the same.

• Line 6: We add the delay parameter and set it to 2000 milliseconds for the first animation.
• Line 13: We do the same for the second animation but set the delay to 4000 milliseconds.

The boxes complete their animation in the same amount of time. However, the second box starts its animation later due to its higher delay value.

The endDelay parameter

Contrary to delay, the endDelay parameter defines the time to wait after the animation ends.

Explanation

In continuing the same example, we set the duration and delay of both animations to be the same.

• Line 7: We add the endDelay property to the first box's animation and set it to 100 milliseconds.
• Line 8: To show the effect of the end delay parameter, we also add the direction parameter. This parameter causes the animation to play normally first and then play in reverse.
• Line 16: We add the endDelay property to the second box's animation and set it to 1000 milliseconds.

In the above example, both boxes start moving simultaneously since their delay is the same. However, the second box has a longer endDelay. Therefore, it waits longer after the animation ends to move back.