Managing CSS with animo.js

A powerful and lightweight tool for managing css animations.

Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.

According to my experience, usage of plugins to get the animations and transitions would have been hard without animo.js. The cross browser support is the most amazing thing which i like in animo.js.

I have used quite a number of external style sheets and plugins to get those feel, since most of them had many limitations or less number of properties they made me not to suggest them.

The problem with CSS alone is that they’re usually fired on page load or on a hover event, and you can’t stack animations or trigger another when one has completed. That’s where javascript, jquery and animo come in.

You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event at any moment you want.

I do agree that we can stack animations using jquery by maintaining the time correctly but animo.js reduces the effort and gives the perfect result.

Installing animo.js

with Github :-

$ git clone https://github.com/ThrivingKings/animo.js.git

or with bower’s package manager :-

$ bower install animo.js

Using animo.js

animo includes the amazing animate.css library which provides you beautiful animations and you can refer to the animate.css documentation for animation class names.

The major animations and transitions provided are

tada, bounce, rotate, spin, cleanse and cross browser blur and focus which is my favorite. And the properties given for every animations and transitions lessens the amount of work and time you will have to spend to achieve them.

 
You can also view Ripple effect using Jquery

Happy coding………:)



Tagged as: ,