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.

Key Takeaways

• AniJS is a declarative handling library for CSS animations that allows for creating animations using simple, declarative commands written directly in HTML, simplifying the management of animations.
• The library uses a custom attribute called data-anijs in HTML5 data attributes to create declarative statements for animations. For example, the code `` means if the input field is focused, it will do a ‘wobble’ animation to an anchor tag element.
• AniJS can be used to enhance web applications with animations. The tutorial uses the example of a simple user registration and login app, demonstrating how to create a login screen, validate the sign-in process, and create a register screen with animations using AniJS.
• The library also provides the ability to call a function before and after animations using the ‘before’ keyword. This can be used to control the flow of animations, such as validating form entries before running an animation or showing and hiding different screens before running an animation.

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:

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

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.

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

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

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

Creating the Login Screen

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

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

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:

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

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:

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

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

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

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:

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

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:

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

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:

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

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

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

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:

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

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

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

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:

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

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.

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

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

What is AniJS and how does it work?

AniJS is a declarative handling library for CSS animations. It allows developers to create animations using a simple and intuitive syntax, without having to write complex JavaScript code. AniJS works by parsing the data-anijs attribute in your HTML elements and executing the corresponding animations. This makes it easier to manage and control animations, as you can define them directly in your HTML.

How do I install AniJS?

Installing AniJS is straightforward. You can download it directly from the GitHub repository or use a package manager like npm or Bower. Once downloaded, you simply need to include the AniJS script in your HTML file. You can then start using AniJS by adding the data-anijs attribute to your HTML elements.

Can I use AniJS with other JavaScript libraries?

Yes, AniJS is designed to be compatible with other JavaScript libraries. It does not interfere with the functionality of other libraries, and you can use it alongside libraries like jQuery, React, or Angular. This makes AniJS a versatile tool for creating animations in a variety of web development contexts.

How do I create animations with AniJS?

Creating animations with AniJS involves adding the data-anijs attribute to your HTML elements and defining the animation parameters. The data-anijs attribute uses a simple syntax that specifies the event, the element to animate, the animation to apply, and the callback function. You can also use the AniJS helper functions to control the animation flow.

What types of animations can I create with AniJS?

AniJS supports a wide range of CSS animations. You can create simple animations like fades and slides, as well as more complex animations involving transformations and transitions. AniJS also supports animation chaining, allowing you to create sequences of animations that execute in a specific order.

Can I use AniJS for responsive design?

Yes, AniJS can be used for responsive design. The animations created with AniJS are based on CSS, which means they can be scaled and adapted to different screen sizes and resolutions. This makes AniJS a useful tool for creating animations that work well on both desktop and mobile devices.

How do I control the timing of animations in AniJS?

AniJS provides several ways to control the timing of animations. You can specify the duration of the animation in the data-anijs attribute, and you can use the delay function to pause the animation for a certain amount of time. You can also use the AniJS helper functions to control the animation flow and timing.

Can I use AniJS to animate SVG elements?

Yes, AniJS can be used to animate SVG elements. You can apply the same animation parameters and control methods to SVG elements as you would to regular HTML elements. This allows you to create complex animations involving SVG graphics and shapes.

How do I debug animations in AniJS?

Debugging animations in AniJS involves checking the syntax of the data-anijs attribute and the CSS animation properties. If an animation is not working as expected, you can use the browser’s developer tools to inspect the HTML element and check the applied CSS properties. You can also check the JavaScript console for any error messages related to AniJS.

Can I contribute to the development of AniJS?

Yes, AniJS is an open-source project and welcomes contributions from the community. You can contribute by reporting bugs, suggesting new features, improving the documentation, or submitting pull requests with code improvements. You can find more information on how to contribute on the AniJS GitHub page.

The above is the detailed content of AniJS: A Declarative Handling Library for CSS Animations. For more information, please follow other related articles on the PHP Chinese website!