Anime.js: Javascript Animation Library

Hello guys, today I’m gonna show you a cool thing about animations. We can create and render animation more easily with  Anime.js.

You just use this library’s built-in features to render animations.

Anime.js is a simple yet powerful JavaScript animation toolkit with a lightweight API. CSS properties, SVG, DOM attributes, and JavaScript Objects are all supported.

Prerequisites:

• Basic Knowledge of CSS, Html, and Javascript

Anime.js: How to Get Started

Download the anime.js file, then include it in your HTML page to get started.

A CDN-hosted copy of the library’s most recent version is also an option:

Now, we use the anime() method, which accepts an object as a parameter, to produce an animation. We detail every aspect of the animation in that item.

let myAnimation = anime({
  /* give specifics on the animation */
});

The animation is described using a variety of different types of attributes. Four different categories have been established for them:

• Targets – Targets are a reference to the element or elements that we want to animate. It could be a DOM node or node list, a CSS selector (div, #square, or.rectangle), or a simple JavaScript object. Utilizing a combination of the aforementioned in an array is another choice.
• Properties – When dealing with CSS, JavaScript objects, DOM, and SVG, this encompasses all properties and attributes that can be animated.
• Property Parameters – the duration, delay, ease, and other property-related characteristics.
• Animation Parameters – section covers factors that are relevant to animation, such as direction, loop, etc.

Let’s now see how this functions in practice. Think about the following instance:

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

See the Pen
AnimeJS-1 by Karan Rajgor (@KaranRajgor)
on CodePen.

In the above example:

• The blue square is picked (the styled div).
• We rotate it into a circle and move it 100 pixels to the left.
• We configured everything to go smoothly in two seconds (linear means that no easing will be applied to the animation).
• The div element is told to return to its original location and form when the animation is finished by setting the direction attribute to alternate. By playing the animation in reverse order, Anime.js does this.

You’ll see that when I specify property values, I don’t use any units. This is so that the animated value will always include the original value’s unit if it has one. We may thus safely ignore the units. However, we need to add that unit consciously if we wish to use it.

Let’s construct something more significant.

Making an Animation of a Pendulum

We’ll make a pendulum animation in this example. It’s time to “animate” our pendulum after “drawing” it with HTML and CSS:

See the Pen
AnimeJS-2 by Karan Rajgor (@KaranRajgor)
on CodePen.

The so-called from-to value type, which establishes the animation’s movement range, is used in this animation. The pendulum rod in this example is rotated from 60 to -60 degrees. We also utilize easeInOutSine easing to mimic the pendulum’s natural motion, which speeds up at the top and calms down at the bottom. To move the pendulum in both directions once more, we select the alternative option and set the loop parameter to true.

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

Animation of a Battery Charge

Similar to the icons on our smartphones, we want to develop an animated symbol of a battery charging for this example. With a little HTML and CSS, this is simple to accomplish. The animation’s code may be found here:

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

See the Pen
Anime_JS-3 by Karan Rajgor (@KaranRajgor)
on CodePen.

Three segments (the green div components) are present and are expanding one after the other as a result of the width attribute being increased. We must employ various delays for each one in order to create this effect. Since there is only one delay parameter that can be used for an animation, we will utilize a function-based parameter in this case that generates a separate value for each target.

To do this, we give a function with three parameters in place of a literal value (target, index, and targetsLength). The method in our example returns the index multiplied by 500 milliseconds, which causes each element to begin animating half a second after the one before it.

The endDelay option is also used to halt the animation briefly before it resumes.

So, these are some cool things we can do with Anime.js, there are a lot more than this.

I hope you guys will like my blog.