Anime.js is a small, lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.
Prerequisite:
- HTML, CSS, JavaScript
- Basic of Animation
Installation of anime.js:
- You can download anime.min.js file and directly use it.
- Just google anime.js CDN and you will get the link and just put it in your script tag.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
Let’s talk about some basic animation. So there are a lot of different properties we have to know about when we are dealing with it.
- Targets: The target includes a reference to the part we want to animate that can be HTML tag, class or id element and lot more that we will see in another article.
- Properties: These are those properties that can be animate when dealing with CSS, JS, SVG.
- Properties Parameters: This includes properties parameters such as duration, delay, end-delay, easing, round, and many more.
- Animation Parameter: This include animation related parameters such as direction, loop, autoplay
And there are other things such as keyframes, timeline, etc.
Now let’s see an example to show how easy it is to animate things using Anime.js.
Example: We created a div with some height, width, and background color that’s basic CSS. The JavaScript part. First, we have to write everything in anime function and pass objects of properties. The target part is where we wanna animate (here its div) and translateX is (if you know about animation it means to) 150 toward x-axis from current position. The height and width are what we wanna achieve at 150 toward the x-axis. The easing linear means to translate it literally the size increasing and decreasing in this case. The duration is the time for animation (in ms).
<!DOCTYPE html><html>
<head>
<title>First animation of animejs</title>
<script src=
</script>
</head>
<body>
<div style="background: blue;
height: 40px;
width: 40px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
height: "80px",
width: "80px",
duration: 2000,
easing: "linear",
direction: "alternate",
loop: true,
});
</script>
</body>
</html>
|
Output: