AniJS: A Declarative Handling Library for CSS Animations

Animation has always been a hot favorite among students learning to program. During a recent weekend web development workshop that I attended, there was a discussion about animations using CSS. That was when I stumbled onto AniJS, a Declarative handling library for CSS animations.

In this tutorial, we’ll see what AniJS is all about and how to use it to create some cool animation effects.

Introduction to AniJS

Using AniJS, we can write animations using declarative commands right in our HTML. It provides an easier way to manage animations using declarations that express the logic. Below is an example of the AniJS declarative syntax:

<input id="txtName" type="text" data-anijs="if: focus, do: wobble, to: a">

In the above code, the declarative syntax says, if focused then do a wobble to an anchor tag element.

Getting Started

During the course of this tutorial, we’ll be creating an app enhanced with animations using AniJS. This app will be a simple user registration and login app that will include some animations using AniJS. The primary focus of this tutorial is how we can make animations work in our web apps using AniJS.

To get started, download AniJS and include it in your page, or reference the CDN version.

<script src="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"></script>

For styling we’ll be using the animate.css libray by Dan Eden.

<link rel="stylesheet"
      href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">

Creating the Login Screen

First we’ll create a screen for the user to login. Here is the html:

<div class="container">

    <div id="divLogin" class="login_screen">
      <h2 id="spnLogin">Sign In</h2>
      <input id="txtLoginId" type="text" placeholder="Email Id" />
      <input id="txtLoginPass" type="password" placeholder="Password" />
      <a href="#" class="btn">
        SignIn
      </a>
      <a href="#" class="signup-link">Register?</a>
    </div><!-- .login-screen -->

</div><!-- .container -->

What we have so far is just a static sign-in page. With some CSS, it looks like this:

See the Pen AniJS Tutorial, static login screen by SitePoint (@SitePoint) on CodePen.

We have created our screen, now we need to validate the sign-in process. In order to attach the animated effect, we make use of the data-anijs attribute on the particular element. We write our declarative statements using HTML5 data attributes, using a custom attribute called data-anijs. Let’s add this attribute to the SignIn button, as shown below:

<a href="#" 
   class="btn" 
   data-anijs="if: click, do: hinge animated, to: .login_screen">
  SignIn
</a>

In the above code, the declarative sentence says, when the sign-in button is clicked, do a hinge animation to the element with the class .login_screen. So when we click the button, the hinge animation takes effect, as you can see by clicking the SignIn button in the demo below:

See the Pen AniJS demo, failed login by SitePoint (@SitePoint) on CodePen.

In the above demo, the animation works when the button is clicked regardless of whether there’s a valid or invalid sign-in. That’s not really what we want, so let’s modify the existing code to animate only on an invalid sign-in.

In order to check if the sign-in is valid we need to call a Validate function before animation. For this, we’ll make use of the before keyword. Detailed documentation related to calling a function before and after animations can be found in the AniJS docs. We’ll be passing in the event object to trigger animation, as well as the animationContext.

First, we’ll define the AniJS helper and then we’ll declare the before animation function. Here is how the function looks:

var animationHelper = AniJS.getHelper(),
    spnLogin = document.getElementById('spnLogin');

animationHelper.validateLogin = function (e, animationContext) {
    var email = document.getElementById('txtLoginId').value;
    var pass = document.getElementById('txtLoginPass').value;
    if (email && pass) {
      spnLogin.innerHTML = 'Processing...';
    } else {
      spnLogin.innerHTML = 'Fill Required fields.';
      animationContext.run();
    }
}

We’ll also modify the data attribute of the SignIn button to include the before animation function, as shown below:

<a href="#"
   class="btn"
   data-anijs="if: click, do: hinge animated, to: .login_screen, before: validateLogin">
  SignIn
</a>

Now the animation will take place only if the email or password field is empty. The animation is run using the animationContext.run() command in the JavaScript code block above. If both an email and password are entered then it will show a ‘Processing…’ message.

Here is a demo of what we have so far:

See the Pen AniJS demo, validating SignIn button by SitePoint (@SitePoint) on CodePen.

Creating the Register Screen

Next we will create a register (or sign-up) page for our app. As you can see, we already have a Register link on our login page. What we’ll do is attach some animations and events to the Register link. First, add the following HTML for the register page to our existing html:

<div id="divReg" class="reg_screen" style="display: none">
    <h2 id="spnLogin">Register</h2>
    <input id="txtName" type="text" placeholder="Name" />
    <input id="txtEmail" type="text" placeholder="Email Id" />
    <input id="txtPassword" type="password" placeholder="Password" />
    <h2 id="spnStatus"></h2>
    <a href="#" class="btn">
      SignUp
    </a>
    <a href="#" class="signup-link">Login?</a>
</div><!-- .reg_screen -->

Notice the inline CSS with display: none on the .reg_screen element, which makes this screen hidden by default. To connect the Register link in the login screen to this new screen, we’ll add the data-anijs attribute to the link:

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .reg_screen">
     Register?
</a>

The above code says when the sign-up link is clicked, do a rollIn animation on the element that has a class of reg_screen (which is our Register screen). But this won’t work, since the Register screen is hidden.

What we need to do is call a function before the animation occurs. In that function, we hide the login screen while making the Register screen visible. Then we run the animation. Here is the JavaScript:

animationHelper.showReg = function (e, animationContext) {
  document.getElementById('divLogin').style.display = 'none';
  document.getElementById('divReg').style.display = 'block';
  animationContext.run();
}

Then we’ll modify the data-anijs attribute of the Register link:

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .reg_screen,before: showReg">
   Register?
</a>

Here is a demo with our newly added code:

See the Pen zdJLC by SitePoint (@SitePoint) on CodePen.

Now that the Register screen can be made visible, we also need to connect the Login link in the Register screen to the original log-in screen, similar to what we just did for the Register screen. Here is the function:

animationHelper.showLogin = function (e, animationContext) {
    document.getElementById('divReg').style.display = 'none';
    document.getElementById('divLogin').style.display = 'block';
    animationContext.run();
}

And here is the modified data-anijs attribute for the Login link:

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .login_screen, before: showLogin">
    Login?
</a>

And here is a demo with the new code:

Editor’s Note: The demos below don’t seem to function 100% correctly in these embeds, in particular when you try to switch back and forth multiple times between “Sign In” and “Register”. Try the “Edit” link in the CodePen frame to view the full demo, where it should work fine.

See the Pen AniJS demo, show login & show register by SitePoint (@SitePoint) on CodePen.

Similar to what we did in the login screen, we’ll validate the Register form using a function:

animationHelper.validate = function (e, animationContext) {
  var name = document.getElementById('txtName').value;
  var regEmail = document.getElementById('txtEmail').value;
  var regPass = document.getElementById('txtPassword').value;
  if (name && regEmail && regPass) {
    document.getElementById('spnStatus').innerHTML = 'Processing...';
    setTimeout(function () {
      document.getElementById('spnStatus').innerHTML = '';
    }, 2000);
  } else {
    document.getElementById('spnStatus').innerHTML = 'Fill required fields';
    animationContext.run();
  }
}

Normally we would be caching many of these objects in variables, rather than repeating the references to them. We’re doing it this way just for this simple example.

And lastly, let’s modify the data-anijs attribute in our HTML to include the animation and function call.

<a href="#" 
   class="btn" 
   data-anijs="if: click, do: pulse animated, to: .reg_screen, before: validate">
    SignUp
</a>

And here is our final demo:

See the Pen AniJS demo final by SitePoint (@SitePoint) on CodePen.

Conclusion

In this tutorial, what we discussed is just a sneak peak into this awesome library. In-depth information on its usage is available in the AniJS docs.

Frequently Asked Questions (FAQs) about AniJS