Over a million developers have joined DZone.

Introducing Nanimator Library for Nano Animations

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

Dependencies
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>
</div>

And let's style them using CSS:

#container{
  position:relative;
}
.object1{
  font-size:24px;
  with:160px;
  margin-right: 10px;
  float:left;
}
.object2{
  font-size:24px;
}

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:

$("document").ready(function(){
  $("#container").nanimate();
});

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>
</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.

Events
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

Examples
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. :)

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Hasin Hayder, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}