JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG

JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG

After completing the first three tutorials of the series, you should now be very comfortable with a lot of Anime.js features. The first tutorial showed you how to select target elements. In the second tutorial, you learned about different types of parameters that can be used to have fine control over the delay and duration of animations of different elements. The third tutorial focused on learning how to have greater control over the values of a single property during the course of the animation.

In this tutorial, you will learn about different callbacks that can be used to execute a function based on the progress of the animation. Almost every example in the previous tutorials used CSS properties to demonstrate how different methods and parameters work. This might have given you the idea that the library is more suited for animating CSS properties. This time, we will have a section dedicated to the creation of interesting SVG-related animations in Anime.js.

Callbacks

As I mentioned in the introduction, you can use callbacks to execute functions based on the progress of the animation. There are four different callbacks: begin, run, update, and complete. Each callback function is fired at a specific time, and each one accepts an animation object as its argument. 

The begin() function is called when the animation actually begins. This means that if an animation has a delay of 800ms, begin() will be called only after that delay is over. You can check if an animation has begun playing or not using animationName.begin, which will return true or false respectively.

The run callback can be used to execute a function in every frame after an animation actually starts playing. If you want to execute a function in every frame from the very beginning of the animation irrespective of its delay, you should use the update callback instead.

The complete callback is similar to begin except for the fact that it is called once the animation has finished playing. Just like begin, you can use animationName.complete to check if an animation has finished playing or not.

You have already seen in the first tutorial how to use the update callback while animating numerical values of a JavaScript object. In this tutorial, we will modify that example and see how to use all these callbacks together to provide more information to the user.

var filesScanned = { count: 0, infected: 0 };
var scanCount = document.querySelector(".scan-count");
var infected = document.querySelector(".infected-count");

var scanning = anime({
  targets: filesScanned,
  autoplay: false,
  count: 100,
  infected: 8,
  delay: 1000,
  duration: 2000,
  easing: "linear",
  round: 1,
  update: function(anim) {
    if (anim.currentTime < 1000) {
      document.querySelector(".update-cb").innerHTML = "Creating an Index...";
    }
  },
  begin: function() {
    document.querySelector(".begin-cb").innerHTML = "Starting the Scan...";
  },
  run: function() {
    scanCount.innerHTML = filesScanned.count;
    infected.innerHTML = filesScanned.infected;
  },
  complete: function() {
    document.querySelector(".complete-cb").innerHTML = "Scan Complete...";
  }
});

I have intentionally added some delay in this animation so that we can notice the difference in the timing of the execution of different callbacks. The update callback starts executing its function as soon as the animation instance begins. 

The actual animation starts playing after 1000ms, and that's when the begin function shows its "Starting the Scan..." message to the user. The run function also starts executing at the same time and updates the numerical values of the object after every frame. Once the animation has finished, the complete callback shows a "Scan Complete..." message to the user.

Easing Functions

Easing functions can be used to control how the value of a property transitions from its initial value to its final value. These easing functions can be specified using the easing parameter, which can accept strings as well as custom Bézier curve coordinates (in the form of an array). 

There are 31 different built-in easing functions. One of them is linear, and the other 30 consist of ten different variations of easeIn, easeOut, and easeInOut. There are three elastic easing equations called easeInElastic, easeOutElastic, and easeInOutElastic. You can control their elasticity using the elasticity parameter. The value of elasticity can be anywhere between 0 and 1000.

EaseIn equations accelerate the value change of the property starting from zero. This means that the change in value would be slow in the beginning and very quick at the end. The rate of change is zero in the beginning and maximum at the end. EaseOut equations decelerate the value change of the property starting from the maximum rate change. 

This means that the change in value would be very quick in the beginning and very slow at the end. EaseInOut equations accelerate the rate change in the beginning and decelerate it at the end. This means that the rate of change will be slow in the beginning as well as the end, and it will be fastest in the middle of the animation. The following demo shows the difference in the rate of change for each of these easing functions.

You can also add your own custom easing functions to the built-in list with the help of anime.easings. Here is an example of creating custom easing functions.

anime.easings['tanCube'] = function(t) {
  return Math.pow(Math.tan(t*Math.PI/4), 3);
}

anime.easings['tanSqr'] = function(t) {
  return Math.pow(Math.tan(t*Math.PI/4), 2);
}

var tanCubeSequence = anime({
  targets: '.tan-cube',
  translateX: '75vw',
  duration: 2000,
  easing: 'tanCube',
  autoplay: false
});

var tanSqrSequence = anime({
  targets: '.tan-sqr',
  translateX: '75vw',
  duration: 2000,
  easing: 'tanSqr',
  autoplay: false
});

SVG-Based Animations

All the motion-related animations that we have created until now moved the target elements in straight lines. It is also possible in Anime.js to move an element along a complex SVG path with lots of curves. You can control both the position and the angle of the animating elements on the path. To move an element to the x coordinate of the path, you can use path(x). Similarly, an element can be moved according to the y coordinate of the path using path(y). 

Unless the path is a straight line, it will almost always form an angle with respect to the horizontal base line. If you are rotating any non-circular element, it will feel more natural if the element follows the angle of the path. You can do so by setting the rotate property to be equal to path('angle'). Here is the code that animates four elements with different easing values along an SVG path.

var path = anime.path('path');

var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'];

var motionPath = anime({
  targets: '.square',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: function (el, i) {
    return easings[i];
  },
  duration: 10000,
  loop: true
});

You can see in the following demo that the red square with easeInCubic easing is slowest in the beginning and the fastest at the end. Similarly, the orange square with easeOutCubic is the fastest in the beginning and the slowest at the end.

You can also animate the morphing of different SVG shapes into one another using Anime.js. The only condition is that both the shapes should have the same number of points. This means that you can only morph triangles into other triangles and quadrilaterals into other quadrilaterals. Trying to morph between an unequal number of polygon points will result in an abrupt shape change. Here is an example of morphing a triangular shape.

var morphing = anime({
  targets: 'polygon',
  points: [
    { value: '143 31 21 196 286 223' },
    { value: '243 31 21 196 286 223' },
    { value: '243 31 121 196 286 223' },
    { value: '243 31 121 196 386 223' },
    { value: '543 31 121 196 386 223' }
  ],
  easing: 'linear',
  duration: 4000,
  direction: 'alternate',
  loop: true
});

One more interesting effect that you can create with SVG is line drawing. All you have to do is give Anime.js the path that you want to use for line drawing and other parameters that control its duration, delay, or easing. In the following demo, I have used the complete callback to fill the line drawing of the Font Awesome anchor icon with a yellow color.

var lineDrawing = anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 4000,
  complete: function(anim) {
    document.querySelector('path').setAttribute("fill", "yellow");
  }
});

Combining the knowledge of all the concepts that you have learned so far, you can create more complex line drawings with much better control over the way they are drawn. Here is an example in which I have written my own name using SVG.

var letterTime = 2000;

var lineDrawing = anime({
  targets: "path",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutCubic",
  duration: letterTime,
  delay: function(el, i) {
    return letterTime * i;
  },
  begin: function(anim) {
    var letters = document.querySelectorAll("path"), i;

    for (i = 0; i < letters.length; ++i) {
      letters[i].setAttribute("stroke", "black");
      letters[i].setAttribute("fill", "none");
    }
  },
  update: function(anim) {
    if (anim.currentTime >= letterTime) {
      document.querySelector(".letter-m").setAttribute("fill", "#e91e63");
    }
    if (anim.currentTime >= 2 * letterTime) {
      document.querySelector(".letter-o").setAttribute("fill", "#3F51B5");
    }
    if (anim.currentTime >= 3 * letterTime) {
      document.querySelector(".letter-n").setAttribute("fill", "#8BC34A");
    }
    if (anim.currentTime >= 4 * letterTime) {
      document.querySelector(".letter-t").setAttribute("fill", "#FF5722");
    }
    if (anim.currentTime >= 5 * letterTime) {
      document.querySelector(".letter-y").setAttribute("fill", "#795548");
    }
  },
  autoplay: false
});

I begin by assigning the value 2000 to the variable letterTime. This is the time that I want Anime.js to take while it draws each letter of my name. The delay property uses the function-based index parameter to set an appropriate delay value with the help of the letterTime variable. 

The index of the first letter "M" is zero, so Anime.js starts drawing it immediately. The letter "O" has a delay of 2000ms because that's the amount of time it takes to completely draw the letter "M".

Inside the begin callback, I have set the stroke value of all the letters to black and their fill values to none. This way we can clear all the color values applied inside the update callback so that the letters can return to their initial state when run in multiple loops. Try clicking the Write the Name button in the following demo to see the code in action.

Final Thoughts

In this tutorial, you learned about different callback functions that can be used to perform tasks like updating the DOM or changing the value of an attribute based on the animation progress. You also learned about different easing functions and how to create one of your own. The final section of the tutorial focused on creating SVG-based animations.

After completing all four tutorials of the series, you should now have enough knowledge of Anime.js to create some interesting effects for your next project. If you have any questions related to this tutorial, please let me know in the comments.