How to Create Web Animations with Anime.js

There are many JavaScript animation libraries out there, but Anime.js is one of the best. It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine. The library has a small file size and supports all modern browsers, including IE/Edge 11+.

The only thing that could stop you from using Anime.js right away is its minimal, zen-like documentation. I like the compact, structured, elegant approach it takes, but I think that a more detailed explanation would be helpful. I'll try to fix this issue in this tutorial.

Getting Started With Anime.js

To get started, download and include the anime.js file in your HTML page:

<script src="path/to/anime.min.js"></script>

Alternatively, you can use the latest version of the library hosted on a CDN:

<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>

Now, to create an animation, we use the anime() function, which takes an object as an argument. In that object, we describe all the animation details.

let myAnimation = anime({
  /* describe the animation details */
});

There are several kinds of properties used to describe the animation. They are grouped into four distinct categories:

• Targets - this includes a reference to the element(s) we want to animate. It could be a CSS selector (div, #square, .rectangle), DOM node or node list, or plain JavaScript object. There is also an option to use a mix of the above in an array.
• Properties - this includes all properties and attributes that can be animated when dealing with CSS, JavaScript objects, DOM, and SVG.
• Property Parameters - this includes property-related parameters like duration, delay, easing, etc.
• Animation Parameters - this includes animation-related parameters like direction, loop, etc.

Let's now see how this applies in practice. Consider the following example:

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});  

See the Pen
AnimeJS: Basic Example by SitePoint (@SitePoint)
on CodePen.

Note: I'm not going to cover the HTML and CSS sections of the code in the tutorial. These tend to be easy to grasp without additional explanation. You can find and explore the HTML and CSS in the embedded pens that follow each example.

In the above example:

1. We select the green square (the styled div).
2. We move it 100 pixels to the left while transforming it into a circle.
3. We set all this to happen smoothly in two seconds (linear means that no easing will be applied to the animation).
4. By setting the direction property to alternate, we instruct the div element to go back to its initial position and shape after animation completion. Anime.js does that by playing the animation in reverse order.

You may notice that I don't use any units when specifying property values. That's because if the original value has a unit, it is automatically added to the animated value. So, we can safely omit the units. But if we want to use a specific unit we must add it intentionally.

Let's create something more meaningful.

Creating a Pendulum Animation

In this example, we will create a pendulum animation. After we "draw" a pendulum using our HTML and CSS skills, it's time to bring it to life:

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});    

See the Pen
AnimeJS: Pendulum Animation by SitePoint (@SitePoint)
on CodePen.

In this animation, we use the so-called from-to value type, which defines a range of movement for the animation. In our case, the rod of the pendulum is rotated from 60 to -60 degrees. We also use easeInOutSine easing to simulate the natural motion of pendulum which slows down at peaks and gets faster at the bottom. We use the alternate option again to move the pendulum in both directions and set the loop parameter to true to repeat the movement endlessly.

Well done. Let's move to the next example.

Creating a Battery Charge Animation

In this example, we want to create an animated icon of a charging battery, similar to the icons on our smartphones. This is easily doable with a bit of HTML and CSS. Here is the code for the animation:

The post How to Create Web Animations with Anime.js appeared first on SitePoint.

by Ivaylo Gerchev via SitePoint