Introduction to Anime.js


Anime.js is a lightweight JavaScript library with a straightforward, effective API. It functions with JavaScript objects, CSS, and DOM elements and also Anime.js is easy to use.

Traditionally, we make animations by gradually modifying the styling of an element. Such movements are possible with JavaScript, but even the simplest animations are difficult and time-consuming to develop.

Anime.js makes animation easier by offering a variety of tools. It offers capabilities to regulate the timing and user inputs and supports many animations running concurrently on the same object.

The majority of popular browsers also support Anime.js.

Installation Part of Anime.js

  • You can use the anime.min.js file directly after downloading it from the link which is provided below −

<script src="./folder/subFolder/anime.min.js"></script> 
  • You may find the link by searching for "anime.js CDN" and pasting it into your script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

Basic Syntax of Anime.js

We have seen how to install anime.js and its basics, now let’s move to the syntax of the anime.js −

let animation = anime ({
   targets,
   properties,
   property parameters,
   animation parameters,
});

In the above syntax, we have created an animation using the anime() function provided by Anime.js, and the anime() function accepts a JavaScript object as a parameter, which contains the properties of our animation.

Now let’s discuss each term of the basic syntax of Anime.js in detail −

Targets

A reference to the component we wish to animate is included in the target and can take the form of an HTML tag, class, or id element, whatever CSS selector, a single DOM node or an array of DOM nodes, An object created with JavaScript that has at least one numerical property and array consisting of any of the previous three values.

Properties

We mention the property we want to animate after mentioning the target. The attributes can include the CSS, JS, and SVG properties that can be animated.

Property parameters

Property parameters include aspects that largely affect the animation's timing. This property parameter covers several characteristics parameters, including duration, delay, end-delay, ease, round, and many others.

Animation parameters

The before/after actions of the animation are controlled by the animation parameters. This includes options relating to animation including direction, loop, and autoplay.

Controls

In order to make animations interactive, Anime.js further offers control tools. Here are some examples of these techniques start, pause, reverse, and restart.

Example

In this example, we are going to create some div elements with particular dimensions of width, and height. Using some CSS we are going to add a particular background color. In the JavaScript section first, we are going to add all the required stuff in the anime function and later pass the object that has the properties

After covering all up now we have the main target to animate over a required element which is the div block here. In this case, we will use translateX towards the x-axis from the initial position.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> 
</head>
<body>
   <h2>
      Introduction of Anime.Js
   </h2>
   <div style="background: green;
      height: 30px;
      width: 50px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "100px",
         width: "100px",
         duration: 2300,
         loop: true,
      });
   </script>
</body>
</html>

In the above code, first, we defined the main structure of the HTML code, then we added the anime.js library to our code using the ‘src’ tag in the head of the code. In the body first, we defined the div element on which we are going to implement the animations. Then inside the script tag, we defined the type of animation we required which is the motion of the given green block from its position to another position for some defined time which will also change the size of the block.

Example

In the previous example, we have defined a box and animated it to increase its height and width, now are going to change the height and width but increase the width and decrease the height.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <h2>
      Increasing the size of width and decreasing the size of height
   </h2>
   <div style="background: green;
      height: 100px;
      width: 10px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "10px",
         width: "100px",
      });
   </script>
</body>
</html> 

In the above code, first, we defined the main structure of the HTML code, then we added the anime.js library to our code using the ‘src’ tag in the head of the code. In the body first, we defined the div element on which we are going to implement the animations. Then inside the script tag, we defined the type of animation we required which is the motion of the given green block from its position to another position for some defined time which will also change the size of the block that is from decreasing the height and increasing the size of the width.

Example

In this example, we are going to animate a rectangular box to a circle using the anime.js library. We will set the duration of the change up to 3000 seconds and run that under a loop. Let’s see the code −

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <center>
      <h1 style="color: red;">More Animation by anime.js</h1>
      <b>
         Here we will do animation on the border
      </b>
      <div style="background: blue;
         width: 100px;
         height: 100px;
         padding-top: 10px; ">
      </div>
   </center>
   <script>
      let animation = anime({
         targets: "div",
         easing: "easeInOutQuad",
         loop: true,
         duration: 3000,
         backgroundColor: "yellow",
         borderRadius: "110px",
      });
   </script>
</body>
</html>

In the above code, first, we defined the main structure of the HTML code, then we added the anime.js library to our code using the ‘src’ tag in the head of the code. In the body first, we defined the div element on which we are going to implement the animations. Then inside the script tag, we defined the type of animation we required which is the motion of the given blue box to a blue circle in three seconds or 3000 milliseconds.

Conclusion

In this tutorial, we have discussed anime.js in detail with examples. Anime.js is a lightweight JavaScript library with a straightforward, effective API. It functions with JavaScript objects, CSS, and DOM elements and also Anime.js is easy to use. Traditionally, we make animations by gradually modifying the styling of an element. Such movements are possible with JavaScript, but even the simplest animations are difficult and time-consuming to develop.

Updated on: 02-Mar-2023

978 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements