Introduction to Anime.js
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.
Anime.js installation part
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>
Basic syntax of Anime.js
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 -
Target
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.
Attributes
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.
Attribute parameters
Property parameters include aspects that largely affect animation timing. This attribute parameter covers multiple characteristic parameters, including duration, delay, end delay, easing, turn, etc.
Animation parameters
The forward and backward movements of the animation are controlled by animation parameters. This includes animation-related options, including direction, looping, and autoplay.
Controls
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.
Example
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.
Example
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.
Example
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 conclusion
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
TypeScript for Beginners, Part 2: Basic Data Types
Mar 19, 2025 am 09:10 AM
Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript
Can PowerPoint run JavaScript?
Apr 01, 2025 pm 05:17 PM
JavaScript can be run in PowerPoint, and can be implemented by calling external JavaScript files or embedding HTML files through VBA. 1. To use VBA to call JavaScript files, you need to enable macros and have VBA programming knowledge. 2. Embed HTML files containing JavaScript, which are simple and easy to use but are subject to security restrictions. Advantages include extended functions and flexibility, while disadvantages involve security, compatibility and complexity. In practice, attention should be paid to security, compatibility, performance and user experience.
