Animation Techniques with anime.js: Timing, Easing, and Keyframes

Welcome to the second tutorial in this series on animating with anime.js! In the previous post, "Become an Animation Master with Anime.js - Setting up the Environment and Basic Animations", we went through setting up the environment for creating animations with anime.js and I explained the basics with different examples.

In this tutorial, we'll cover some advanced techniques for timing, easing, and keyframes in anime.js.

Before we move on, remember you can build your websites, landing pages, APIs, and more, with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased.DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.

---

Timing

Timing is one of the key aspects of animation. In anime.js, you can use the duration property (in milliseconds) to specify the length of an animation. We can also use the delay property which is also in milliseconds, to specify a delay before the animation starts.

For example, let's say you want to animate an element's position from left to right over the course of 1 second, with a delay of half a second before the animation starts:

<div id="#box"></div>

#box {
  margin-left: 200px;
  margin-top: 200px;
  width: 100px;
  height: 100px;
  background: blue;
}

anime({
  targets: '#my-element',
  translateX: ['0px', '200px'],
  duration: 1000,  // 1 second
  delay: 500,  // half a second
});

We can also use the loop property to specify that the animation should loop indefinitely.

anime({
  targets: '#box',
  translateX: ['0px', '200px'],
  duration: 1000,
  loop: true,
});

Easing

We mentioned the timing and now let's take a look at another very important aspect of animation, easing. In simple terms, easing refers to the way the animation accelerates and decelerates over time. In anime.js, we have a property named easing that we can use to specify the easing function to use for the animation.

Anime.js offers a long list of built-in easing functions such as 'linear', 'easeInQuad', and 'easeOutQuad'. Usually, the default options are good enough, but you can also use the bezier function to create custom easing curves.

You can find the complete list here.

For example, let's animate an element's position using a custom easing curve:

anime({
  targets: '#box',
  translateX: ['0px', '200px'],
  duration: 1000,
  easing: anime.bezier(0.5, 0, 0.5, 1),
});

This will animate the element's position using a custom easing curve that starts and ends slowly, with a faster rate of change in the middle.

Keyframes

Keyframes refer to states in our animations. So far we have use the default behaviour which starts with a default from value and animates the element by updating the value to get to the so-called to value.

However, in anime.js, we can specify a series of intermediate states for the animation and create complex animations.

For example, let's say you want to animate an element's position from left to right, with a bounce at the end:

anime({
  targets: '#box',
  translateX: [
    {value: '0px', duration: 1000},  // starting position
    {value: '200px', duration: 1000},  // intermediate position
    {value: '100px', duration: 500},  // bounce position
    {value: '300px', duration: 1000},  // ending position
  ],
  easing: 'easeInOutQuad',
});

This will animate the element's position from 0px to 300px over the course of 4 seconds, with a bounce at the 200px position. The animation is using the easeInOutQuad easing function for all the keyframes and different durations for each keyframe. We could also set different delays or easing functions for each keyframe.

We can also set multiple properties at the same time in each keyframe. For example, let's animate the element's position and opacity simultaneously:

anime({
  targets: '#box',
  translateX: [
    {value: '0px', duration: 1000},
    {value: '200px', duration: 1000},
  ],
  opacity: [
    {value: 0, duration: 1000},
    {value: 1, duration: 1000},
  ],
  easing: 'easeInOutQuad',

});

Another way to create keyframes is to use the keyframes property to specify the intermediate states.

Let's take a look at an example using the keyframes property.

anime({
  targets: '#box',
  keyframes: [
    {translateX: 300},
    {translateX: 0},
    {translateX: 200},
    {translateX: 100},
  ],
  duration: 3000,
  easing: 'easeOutQuad',
  direction: 'alternate',
  loop: true
});

---

In the next tutorial, we'll go through advanced animations with anime.js with a focus on chaining, sequencing, and staggering, so stay tuned.

Don't forget to visit DoTenX and soon a dedicated animation section will be added to the platform allowing you to create amazing animations with the concepts you learned here. Keep an eye on the Github repository for the new release.