Animation Techniques with anime.js: Timing, Easing, and Keyframes
Tags: html, css, webdev, codenewbie
Published: 2023-01-01 09:01:45

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](https://blog.dotenx.com/become-an-animation-master-with-animejs-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](https://dotenx.com) 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*](http://github.com/dotenx/dotenx)[.](http://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:

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

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

```javascript
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.

```javascript
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](https://animejs.com/documentation/#linearEasing).

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

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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**](https://dotenx.com/) 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**](https://github.com/dotenx/dotenx) for the new release.