What is Anime.js?
Anime.js is a lightweight, easy-to-use JavaScript library for animations. It utilizes CSS, DOM, and JavaScript to achieve simple and complex animations.
Traditionally, we create animations by changing an element's styling over time. Such animations are achievable using only JavaScript, but it is challenging and time-consuming to code even the most basic animations.
Anime.js simplifies animation by providing a wide array of tools. It supports multiple animations simultaneously on the same object and provides features to control timing and user inputs.
Most major browsers also support Anime.js.
Set up anime.js
To start using Anime.js within our projects, we must include Anime.js files.
We can include the files by manually downloading them and linking the anime.min.js file's path.
<script src="./folder/subFolder/anime.min.js"></script>
Or, we can include it via a
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
Anime.js basics
We create an animation using the anime() function provided by Anime.js. This function takes a JavaScript object as a parameter that contains the properties of our animation.
let animation = anime({targets,properties,property parameters,animation parameters,});
Targets
This property defines the targets of our animation. The following are valid values for the targets property:
Any CSS selector
A DOM node or list of DOM nodes
A JavaScript object with at least one numerical property
An array consisting of any of the above three values
Note: Click here to learn more about targets in anime.js.
Property
After specifying the target, we mention the property we wish to animate. The properties can be:
Any CSS property
A JavaScript object containing one or more numerical values
A DOM attribute containing a numerical value
An SVG attribute containing one or more numerical values
Any CSS transformation provided by anime.js such as translateX, translateY, translateZ, and so on
Note: Click here to learn more about the property value in anime.js.
Property parameters
Property parameters include attributes that primarily affect the timing of the animation. Some of these parameters include:
Duration: The animation's duration in milliseconds
Delay: The time in milliseconds before animation starts
End delay: The time in milliseconds after animation ends
Easing: The function used to smoothen animations
Note: Click here to learn more about property parameters in anime.js.
Animation parameters
The animation parameters involve controlling the before/after actions of the animation. They include the following:
Direction: The direction of the animation.
Loop: The number of times the animation repeats.
Autoplay: Determines whether the animation starts automatically.
Controls
Anime.js also provides control features to make animations interactable. Some of these methods are as follows:
play(): This starts or resumes the animation.pause(): This halts the animation.restart(): This jumps back to the animation's start point.reverse(): This plays the animation from finish to start.
Example
The following example shows an animated box that moves in a loop when it is clicked:
Explanation
In the HTML section of the code, we create a box using the <div> tag.
Line 4: We create a
<div>tag and set its class tobox. We set the tag to listen for theonclickevent. When the tag is clicked, the browser executes thetogglePlay()function that we'll define shortly.Line 6: We include the JavaScript file needed for Anime.js using a CDN.
In the JavaScript section of the code, we create the animation function and another function to toggle the animation.
Line 1: We define a new animation using the
anime()function.Line 2: We set the target to all elements having the
boxclass.Line 3: We define the list of horizontal movements we require.
Line 4: We define the first horizontal motion. It moves to the screen position at 100px (
value), taking 500 milliseconds (duration) after a delay of 500 milliseconds (delay).Line 5: We define the second horizontal motion. This motion happens after the first horizontal motion.
Lines 7–10: We define the vertical motions as similar to the horizontal movements.
Line 11: We set the animation to repeat after completion.
Line 12: We set
autoplayto false as we want the animation to start on click instead of automatically.Line 15: We create a variable to keep track of whether the animation is playing or paused.
Lines 16–22: We create a simple function to toggle between playing and paused states of the animation using the
play()andpause()control methods. This function is called whenever the box is clicked.
