Anime.js is a lightweight JavaScript library with a simple, efficient API. It works with JavaScript objects, CSS, and DOM elements, and Anime.js is easy to use.
Traditionally, we create animations by gradually modifying the style of an element. Such actions can be achieved with JavaScript, but even the simplest animations are difficult and time-consuming to develop.
Anime.js makes animation easier by providing various tools. It provides the ability to adjust timing and user input, and supports many animations running simultaneously on the same object.
Most popular browsers also support Anime.js.
After downloading anime.min.js file from the link provided below, you can use it directly -
<script src="./folder/subFolder/anime.min.js"></script>
You can find the link by searching for "anime.js CDN" and pasting it into the script tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
We have seen how to install anime.js and its basics, now let us turn to the syntax of anime.js -
let animation = anime ({
targets,
properties,
property parameters,
animation parameters,
});
In the above syntax, we create an animation using the anime() function provided by Anime.js. The anime() function accepts a JavaScript object as a parameter, which contains the properties of our animation.
Now let us discuss each term of Anime.js basic syntax in detail -
A reference to the component we wish to animate is contained in the target and can take the form of an HTML tag, class or id element, either a CSS selector, a single DOM node or an array of DOM nodes, an object created using JavaScript, with at least A numeric property and an array consisting of any of the first three values.
We mention the property we want to animate after mentioning the target. These properties can include CSS, JS, and SVG properties that can be animated.
Property parameters include aspects that largely affect animation timing. This attribute parameter covers multiple characteristic parameters, including duration, delay, end delay, easing, turn, etc.
The forward and backward movements of the animation are controlled by animation parameters. This includes animation-related options, including direction, looping, and autoplay.
In order to make the animation interactive, Anime.js also provides control tools. Here are some examples of these techniques starting, pausing, reversing, and restarting.
In this example, we will create some div elements with specific width and height dimensions. We'll use some CSS to add a specific background color. First in the JavaScript part we will add all the required stuff in the Anime function and then pass the object with properties
Now with everything covered, our main goal is to animate on the desired element (here a div block). In this example we will use translateX which moves from the initial position towards the x-axis.
<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 define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, which is the movement of a given green block from its position to another over a defined period of time, which will also change the size of the block.
In the previous example we defined a box and animated it to increase its height and width, now we will 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 define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, i.e. the movement of a given green block from its position to another over a defined period of time, this will also change the size of the block, i.e. from decreasing height to increasing The size of the width.
In this example, we will use anime.js library to animate a rectangular box into a circle. We set the duration of the change to 3000 seconds and run it in a loop. Let's look at 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 define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, which is a given blue box moving to a blue circle in three seconds or 3000 milliseconds.
In this tutorial, we discussed anime.js in detail with examples. Anime.js is a lightweight JavaScript library with a simple, efficient API. It works with JavaScript objects, CSS, and DOM elements, and Anime.js is easy to use. Traditionally, we create animation by gradually modifying the style of an element. Such actions can be achieved with JavaScript, but even the simplest animations are difficult and time-consuming to develop.
The above is the detailed content of Introduction to Anime.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
