Before you can begin animating the elements on your webpage using
You can also install the library using Bower by running the following command:
bower install anijs --save
Once you have included all the necessary files, the elements on your webpage will be ready for animation.
Getting Started With AniJS Syntax
In its basic form, AniJS uses the following syntax to animate particular elements based on any event.
If (any event happens), On (any element), Do (something like animate, add/remove class), To (this or any other element)
Here, the If part specifies the event which will trigger the animation or class manipulation. The On part specifies the element whose events AniJS should be listening to. This can be different from the element on which you have set up the
data-anijs attribute. The Do part specifies the action to take. Here, you can specify the name of the animation that you want to apply, etc. Finally, the To part is used to specify the element which needs to be animated or manipulated.
The If part is necessary for the AniJS statement that you add to animate any element. The On part is optional and, if left unspecified, uses the current element as the default value. The Do part is also necessary as it tells the browser what to do when the specified event happens. The To part is also optional and defaults to the current element when not specified.
You can also use the Before and After hooks to specify what should happen before and after AniJS does the thing mentioned inside the Do part.
Animating Different Elements
AniJS allows you to run an animation by triggering it on any applicable event listed on the MDN page. Similarly, you can use
to to target any element you want using CSS selectors. For example, you could specify that you want to listen to an event on
section div p.first, etc. The
do part can be used to specify the animation that you want to apply to different elements. AniJS has a lot of animations which can be applied to any element you want.
The following HTML snippet will show you how to apply some animations on elements which will be triggered on certain events.
<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div> <div class="pink box" data-anijs="if: click, do: tada animated"></div> <div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div> <div class="purple box" data-anijs="if: mousemove, do: shake animated"></div> <div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div> <div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div> <div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div> <div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div>
In each case, all you have to do is write the statements inside the
data-anijs attribute, and the library will take care of the rest. (We have skipped the
to part in all these animations so the animation is applied to the element inside which we have specified the
The last four boxes have different values for the
on part. This, for example, means that the animation on the green box will happen only when the mouse moves over the brown box. Similarly, the bounce animation on the yellow box will start playing whenever a user double-clicks anywhere inside the body.
You can try these animations out yourself in the embedded CodePen demo.
Manipulating Classes and HTML Elements
Let's begin with class manipulation. AniJS has three reserved keywords for manipulating classes. These are
$toggleClass. As the name suggests, you can use them to add, remove, and toggle one or multiple classes of an element respectively. All you have to do is specify the class names after the reserved keywords.
Similarly, you can use reserved keywords like
$children to traverse the DOM.
You can use these two sets of reserved keywords together to do something like adding a certain class to all the children of an element after a visitor double-clicks that particular element.
However, which children you are referring to can be ambiguous in certain cases. For example, you might have applied the
data-anijs attribute to one element but set the value of the On part to something else using CSS selectors. In this situation, AniJS will have no way of knowing if the class has to be added to the children of the element referred by the CSS selector or the element to which you have applied the
In such cases, you can remove the ambiguity by using another reserved keyword called
target refers to the element pointed to by the CSS selector.
Consider the following three examples in which AniJS has been used to toggle classes of different elements:
<div class="box" data-anijs="if: click, do: $toggleClass orange"></div> <div class="box second" data-anijs="if: click, do: $toggleClass red, to: $children"> <span class="shells"></span> <!-- Many more span tags --> <span class="shells"></span> </div> <div class="box" data-anijs="if: click, on: .shells, do: $toggleClass yellow, to: $parent target; if: click, on: .shells, do: $toggleClass yellow, to: $parent"></div>
In the above example, I have reformatted the HTML to make it easier to read and see what's going on.
Let's begin with the first
div. In this case, we have omitted both the
to parts of the
data-anijs attribute value. Therefore, they both default to the current
div itself. If you try to click on this particular
div, it will toggle the
orange class, which in turn changes the box to orange.
In the case of the second
div, we are telling AniJS to toggle the class called
red for all elements which are children of that particular
div. This will rotate all the children
span elements and change their color to red, while setting the border-radius to zero.
We have supplied two different statements inside the
data-anijs attribute of the third
div. Both these statements toggle the same
yellow class. However, the effects are completely different due to the use of the
In the first case, we have added the
target keyword after the
$parent keyword. This tells AniJS that we want to toggle the class for the parent of the elements pointed to by the
shells class. In the second case, we have skipped the
target keyword, so AniJS changes the background of the parent of the current
div. Since the parent of the
div is the
body itself, the whole page turns yellow.
You can try clicking on different elements and seeing how they affect the page in the embedded CodePen demo.
One more thing worth noticing is that even though the
data-anijs attribute for the third box has two statements, clicking the box itself does not have any effect. This is because we have instructed AniJS to listen to the click events on the
span elements with class
shells in both the cases.
Other Ways to Manipulate HTML
Another way to manipulate HTML elements on a webpage using AniJS would be to clone or remove them. The library has reserved the keywords
$clone which will tell it whether you want to remove an element or clone it.
You can pass multiple selectors to
$remove in order to remove multiple elements from the webpage. Keep in mind that different CSS selectors need to be separated with the pipe
$clone keyword also accepts two parameters. The first one is the CSS selector to specify the element you want to clone. The second one is a number to specify how many copies you want to make. For instance,
$clone .shells|10 will make 10 copies of the elements with class
shells and append them as children of the element on which the
data-anijs attribute has been specified. If the copies have to be appended to a different element, you can point AniJS to it by specifying the appropriate CSS selector after
to in the AniJS statement.
The aim of this tutorial was to help you get started with AniJS as quickly as possible. As you might have noticed, the library is very easy to use. All you have to do is specify the right attribute values and AniJS will take care of everything else like changing classes, manipulating the DOM, and animating any changes.
The library offers a lot of other features that we have not covered in this tutorial. You should go through the official documentation to learn more about it and use it to its full potential.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post