Anime.js is a lightweight and easy-to-use JavaScript library for creating animations.
Note: If you are unfamiliar with anime.js, click here to read a basic overview first.
To animate any element, we call the anime()
function and pass a parameter object with certain targets
key.
anime({targets: values,...});
The value of the targets
key is the element or elements we want to animate.
The value can be the following:
We can use any CSS selector as a target. This includes class selectors and ID selectors, to name a few.
Note: Click here to learn more about CSS selectors.
However, since targets
key.
The above example demonstrates target selection using type, class, and ID. We use a <p>
tag and two <div>
tags for each selection.
anime()
function. We set the targets
key to 'p'
. This selects all the paragraph elements. The animation itself is a color shift from black to red over three seconds.targets
key set to '.box'
. All elements having the box
class will be selected for the animation. We specify the animation to change the box's color to green over three seconds.targets
key set to '#box2'
. Only the element with the ID, box2
, will be animated to move vertically.Another way to choose elements for animation is by passing a DOM object or a list of DOM objects as the value for targets
.
In the above example, we first select objects from the DOM and then apply animations to each object.
bluebox
, from the DOM and store it in the blue_box
variable.pink
class from the DOM and store them in pink_boxes
.targets
set to blue_box
. We specify the animation to translate the box left by 500px. As a result, the element with the ID bluebox
is translated.targets
set to pink_boxes
. By this point, pink_boxes
is a list of five DOM nodes. We specify the animation to rotate each box by 360 degrees. As a result, all elements with class pink
are rotated.We can also pass a JavaScript object as a target value. However, the object must contain at least one numerical value.
In this example, we animate a simple loading-progress meter.
loadingDisplay
, from the DOM. This element will be used to display the JavaScript object that we want to animate.progress
.loading
object as a target. We can now specify animations on the numerical values of the loading
object. In this case, we want the progress
value to transition to 100
.update
callback to update the p
element after each animation frame.We may also mix and match our method of selecting a target by using an array. The array can consist of any of the previously discussed target values.
For this example, we consider a <p>
tag, and two <div>
tags. Each tag is selected using one of the previously described methods.
box2
, from the DOM.counter
, from the DOM. This element will be used to display the JavaScript object (counterObj
) that we animate.counterObj
, with a numerical value.targets
key, we have passed an array consisting of a CSS selector ('.box'
), a DOM node (box2
), and a JavaScript object (counterObj
).counterObj
to 999
.