AniJS: Easy CSS Animations Without Coding

Many people want to add subtle animations to their website in response to clicks or other actions by their visitors. However, not everyone is well-versed in using CSS or JavaScript. Some just know how to modify the HTML and have the change reflect on the website.

Generally, this is the part where developers take over and add the necessary JavaScript and CSS to make your website stand out. However, if you want to be able to build an animated site yourself, without coding, a library called AniJS would help a great deal.

AniJS lets you create animated styling for your website without any JavaScript or CSS coding! You can specify all your animations from HTML using a simple If-On-Do-To syntax.

Installation

Before you can begin animating the elements on your webpage using data-anijs attributes, you will have to include the necessary files. Three different files are needed to access all the functionality of AniJS. These files are the core JS library, the CSS file for the animations and another helper JavaScript file for using some special AniJS syntax like $addClass, $toggleClass, and $removeClass.

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 animation ready.

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 the on and to target any element you want using CSS selectors. For example, you could specify that you want to listen to an event on div.promotion or 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 on 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 just 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 on the element inside which we have specified the data-anijs attribute.)

The last four boxes have different values for the on part. This, for example, means that the animation on 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

AniJS allows you to do more than simply animate different elements. For example, you can use it to add, remove or toggle classes applied on different elements. Similarly, you can also remove HTML elements or clone them without adding a single line of JavaScript. The library also allows you to traverse the DOM using special reserved keywords.

Let's begin with class manipulation. AniJS has three reserved keywords for manipulating classes. These are $addClass, $removeClass and $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 $parent, $ancestors, $closest, $find and $children to traverse the DOM.

You can use these two sets of reserved keywords together to do something like add 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 on one element but set the value of On part to something else using CSS selectors. In this particular 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 on which you have applied the data-anijs attribute. In such cases, you can remove the ambiguity by using another reserved keyword called target. Here, target refers to the element pointed 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 on and to part 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 case of 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 as well as 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 use of the target keyword.

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 by the shells class. In the second case, we have skipped the target keyword, so AniJS changes the background of the parent of 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 see 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 $remove and $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  | character.

The $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.

Conclusion

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, manimulating 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.

by Monty Shokeen via Envato Tuts+ Code