JavaScript-Based Animations Using Anime.js, Part 2: Parameters

JavaScript-Based Animations Using Anime.js, Part 2: Parameters

In the first tutorial of the Anime.js series, you learned about different ways of specifying the target elements that you want to animate and the kinds of CSS properties and DOM attributes that can be animated. The animations in the previous tutorial were very basic. All the target elements were just moving a certain distance or changing the border radius at a fixed speed. 

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.

Property Parameters

These parameters allow you to control the duration, delay and easing of individual properties or a group of properties at once. The duration and 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.

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

As you can see, these parameters can be used independently of other parameters or in combination with them. The cubicAnimation has both the duration and 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 duration, delay and easing values. 

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 duration, delay, easing and elasticity parameters for individual properties. The following code and demo should make it clearer.

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

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 rotate and translateY properties use the default value for the delay and easing parameters because we have neither provided a local nor a global value for them.

Function-Based Parameters

Property-based parameters are helpful when you want to change the order and duration for animating individual properties. However, the same duration and delay will still be applied for individual properties on all the target elements. Function-based parameters allow you to separately specify the duration, delay, elasticity and 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, index, and targetCount. The 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.

The 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 delay, duration or 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.

The 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 duration and 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.

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

The following code sets a different easing value for each target element using the index parameter.

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

Animation Parameters

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 true or false. Its default value is true, but you can stop the animations from starting by themselves by setting it to false.

The direction parameter controls the direction in which the animation is played. It can have three values: normal, reverse, and 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.

When the 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.

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

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.

Final Thoughts

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.

If you have any questions related to this tutorial, please let me know in the comments.