Sometimes, you might need to animate the target elements in a more rhythmic manner. For example, you might have ten different elements that you want to move from left to right with a delay of 500ms between the start of the animation for each element. Similarly, you might want to increase or decrease the animation duration for each element based on its position.
In this tutorial, you will learn how to use Anime.js to properly time the animation of different elements using specific parameters. This will allow you to control the order in which an animation sequence is played for individual elements or all the elements.
These parameters allow you to control the duration, delay and easing of individual properties or a group of properties at once. The
delay parameters are specified in milliseconds. The default value for duration is 1000ms or 1s.
This means that unless specified otherwise, any animation applied to an element will be played for 1 second. The
delay parameter specifies the amount of time the animation takes to begin once you have already triggered it. The default value for delay is 0. This means that the animations will begin as soon as they are triggered.
You can use the
easing parameter to control the rate at which an animation is played for the duration it is active. Some animations start out slow, pick up pace in the middle, and then slow down again at the end. Others start at a good pace and then slow down for the rest of the time.
However, in all the cases, the animation always completes within the time specified using the
duration parameter. Anime.js provides a lot of easing functions that you can apply to your elements directly by only using their names. For some easing functions, you can also set a value for the
elasticity parameter to control how much an element’s value bounces back and forth like a spring.
You will learn more about different easing functions in the final tutorial of the series. The following code snippet shows how to apply all these parameters to different animations.
As you can see, these parameters can be used independently of other parameters or in combination with them. The
cubicAnimation has both the
easing parameter applied to it. If the duration had not been specified, the animation would have run for 1 second. Now, it will run for 1,200 milliseconds or 1.2 seconds.
One major limitation of property parameters in the above example was that all the animations of the target element will have the same
This may or may not be the desired behavior. For example, instead of translating and changing the border radius of the target element at the same time, you might want to first translate the target element and then animate its border radius. Anime.js allows you to specify different values for the
elasticity parameters for individual properties. The following code and demo should make it clearer.
In the above code, all the properties that we want to animate have different values. The background color animation has a duration of 400ms, while the rotation and translation animations use the global duration value of 1500ms.
The background color animation also has a delay so any change in the color only starts after 1500ms have passed. The
translateY properties use the default value for the
easing parameters because we have neither provided a local nor a global value for them.
Property-based parameters are helpful when you want to change the order and duration for animating individual properties. However, the same
delay will still be applied for individual properties on all the target elements. Function-based parameters allow you to separately specify the
easing for different target elements in a compact manner.
In this case, you set the values of different parameters using functions instead of numbers. These functions accept three parameters:
target parameter stores the reference to the current target element. The
index parameter stores the index or position of the current target element. The
targetCount parameter stores the total number of target elements.
target parameter is useful when the animation values need to be set based on some attributes of the target element. For example, you can store the
easing values for a target element in data attributes and then access them later.
Similarly, you could access the background color of a target element and then manipulate it to set a final unique color value for individual elements. In this way, you could animate all the elements to have a background color that is 20% darker than their current color.
index parameter gives you the position of the current target in our list of target elements. You can use it to gradually change the value for parameters like
delay for different elements.
This is generally useful when you want to set the values in ascending order. You can also subtract the
index from the
targetCount to set the values in descending order. The following code snippet uses both these parameters to specify the values in ascending and descending order.
The following code sets a different
easing value for each target element using the
This last set of parameters allows you to specify the number of times an animation should be played and the direction in which it should be played. You can specify the number of times an animation should be played using the
loop parameter. There is also an
autoplay parameter which can be set to
false. Its default value is
true, but you can stop the animations from starting by themselves by setting it to
direction parameter controls the direction in which the animation is played. It can have three values:
alternate. The default value is
normal, which keeps the animation playing normally from the start values to the finish values. Once the target elements reach the finishing value, if the
loop value is greater than 1, the target elements jump back abruptly to the start values and then begin the animation again.
direction is set to
reverse and the
loop value is greater than 1, the animation gets reversed. In other words, the target elements start the animation from their final state and go backwards to reach the initial state. Once they are in the initial state, the elements jump back to the final state and then again start the reverse animation. The
alternate direction value changes the animation direction after every loop.
In the following demo, I have set the number of loops to four so that you can easily notice the difference in animation of the elements in different modes.
So far in this tutorial, we have used functions to pass different values to the target element for their animation delay or duration. You can also get the same functionality with the help of
stagger() method in anime.js.
stagger() method basically allows you to control how an animation happens across multiple elements. It accepts two parameters. First one is the value that you want to apply, second one is an object with a bunch of parameters which determines how the staggering would apply.
Here is an example to show how
stagger() compares with regular functions that we have written up to this point:
You might now ask if there is a way to apply the animation delay in reverse direction like we did with our function. Yes, that’s definitely possible. Here is an example:
We could similarly apply staggering to the animation duration. The delay value for first element in the previous examples was set to 0 due to staggering and this was also what we intended to do. However, the animation duration has to be non-zero for the first element. Otherwise, it would be at the end stage as soon as the page loads.
A non-zero duration for the animation of the first element can be set with the help of
start parameter set to 1000 for the staggering. Here is an example:
What if the non-zero duration value has to be applied while beginning for the last element? In this case, we can use the following parameters for the
The following CodePen demo does everything like the example under section “Function-Based Parameters” but it uses the
stagger() method to do so. As you can see, there is no difference in the final result.
One thing that I would like to point out is that the stagger method will not work in old versions of the library. Make sure that you are using the latest version to avoid any errors.
In this tutorial, you learned about different kinds of parameters that can be used to control the animation of target elements in Anime.js. The property parameters are used to control the animation of individual properties.
You can use them to control the sequence in which the animation is played for individual elements. The function parameters allow you to control the timing and rate of animation for individual elements with respect to the whole group. The animation parameters allow you to control how the animation itself is played for different elements.