Over a million developers have joined DZone.

Introducing Nanimator Library for Nano Animations

DZone's Guide to

Introducing Nanimator Library for Nano Animations

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Nanimator Demo

Github URL: https://github.com/hasinhayder/Nanimator
Live Demo: http://hasinhayder.github.io/Nanimator/index2.html

I got the idea for Nanimator Library while working with jQuery Transit library and CSS3 transforms a couple of days ago. I was chaining the animation of numbers of objects by writing callbacks for each of them and suddenly I got the idea that I can actually do it pretty easily by converting the whole thing as a jQuery Plugin. This is how Nanimator was born. It’s primary purpose is to animate a set of DOM elements inside a container, mainly translate, translateX, translateY, and opacity. It also reduces your code by writing almost nothing at all, except initializing the library.

Nanimator serves its purpose pretty well by queueing the DOM elements in a stack, maintaining a chain among them (which you can also break, but I will highlight that later in this article). Nanimator uses the fantastic jQuery Transit plugin under the hood to wrap everything up for you.

Let’s see how easy it is to start using Nanimator by creating a small example first

Well, being a jQuery plugin, Nanimator requires you to include the jQuery library before including it in your application. Besides that, jQuery Transit plugin is also required. Let’s include them :)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js" ></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js' type="text/javascript"></script>
<script src='http://hasinhayder.github.io/Nanimator/js/jquery.nanimator.js' type="text/javascript"></script>

Now that you have all the necessary files included and ready to use, let's write some markup:

<div id="container">
  <div class="object1 nanimate">Hello</div>
  <div class="object2 nanimate">World</div>

And let's style them using CSS:

  margin-right: 10px;

It’s very important that you set the position of the parent container as relative/absolute for successful animation. So don’t forget that when you work with Nanimator. Also add a “nanimate” class to the child DOM elements that you want to be animated. You can override this classname, but we will talk about that later.

The code above will show you a plain “Hello World” in an old-fashioned way, but wait a minute – we are going to animate them using Nanimator:


You can see this full code at http://codepen.io/anon/pen/xKDco and the resulting animation at http://codepen.io/anon/full/xKDco

Wasn’t that incredibly simple? Maybe a little boring but there are fantastic data attributes supported by Nanimator using which you can add extra toppings. Let’s change our markup like this and we will see that the child elements are animated from opposite directions.

<div id="container">
  <div data-direction="right" class="object1 nanimate">Hello</div>
  <div data-direction="left" class="object2 nanimate">World</div>

The code is available at http://codepen.io/hasin/pen/Iwdqb and the result can be seen at http://codepen.io/hasin/full/Iwdqb

Here’s a complete list of data attributes which are supported by Nanimator. Let’s have a look at them:

Supported data attributes
data-direction: You may specify the direction of the animation. Supported values are “top”,”bottom”, “left” and “right”

data-distance: The distance covered by an animated object during animation. Supported values are any integer with a default value of “40″, i.e 40px.

data-time: The duration of animation, expressed in milliseconds. It has a default value of 500 (milliseconds).

data-fade: This is, by default, set to “false”. But if set to "true", the animated objects will fade out after the animation. You can also control the time before it fades out by passing the value to data attribute “data-fadedelay”

data-fadedelay: This is the time, in milliseconds, by which the animation will delay before fading an object out.

data-release: This is possibly the most important attribute for developers who want to deal with the internal chaining mechanism of Nanimator. By default, Nanimator maintains a queue of DOM elements and one element is animated once the previous one’s animation is complete. Now, if you specify the data-release to "true" then Nanimator will not wait for the previous animation to complete, rather they will be animated simultaneously.

Nanimator fires a couple of events for each object before starting the animation, and after completing the animation. For example “nanimation.started” and “nanimation.finished” are fired before the animation is started and after the animation is complete, respectively.

Nanimator also fires an event named “nanimation.complete” for the DOM container element after all the childrens' animation is done. Have a look at jquery.nanimato.js to see the available events :)

You can have a look at the following examples and their source code to understand how easy it is to use Nanimator, and how beautifully you can animate almost anything with little effort :)

Nanimator Library

1. Simple Animation: http://hasinhayder.github.io/Nanimator/index.html
2. Profile Animation: http://hasinhayder.github.io/Nanimator/index2.html
3. Horizontal Line Chart: http://hasinhayder.github.io/Nanimator/index3.html
4. A mashed up Animation: http://hasinhayder.github.io/Nanimator/index4.html

Feel free to fork the Nanimator Library in Github at https://github.com/hasinhayder/Nanimator. Pull requests are most welcome.

Happy Nanimating :)

Oh by the way, Nanimator is brought to you by Happy Monster, our new start-up where two of us (The WordPress Wizard and Front-end Engineer, and the Creative Designer) are accepting new WordPress jobs. So if you are looking for a team, drop us a line. :)

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}