There are a wide selection of free animation libraries available in 2015 and today I’ll be reviewing nine of them on the basis of their ease of use, features and general popularity.
Animate.css is one of the sleekest and most easy-to-use CSS animation libraries out there. Applying the Animate library to your project is as simple as adding the required CSS classes to your HTML elements. You can also use jQuery to call the animations on a particular event.
Animate.css is one of the most popular and widely used CSS animation library and its minified file is small enough for inclusion in mobile websites as well. Personally, I feel that this is one of the best animation libraries that I have come across and I would definitely recommend you to use this in your next project.
This project is open-source with it’s code on GitHub.
Bounce.js is a neat animation library shipped with about ten animation ‘pre-sets’, hence the small size of the library. Like animate.css, the animations are smooth and flawless. You might want to consider using this library if you don’t need a comprehensive list of animation types and could benefit from a lower file-size overhead.
Magic Animations is one of the most impressive animation libraries available. It has many different animations, many of which are quite unique to this library. As with Animate.css, you can implement Magic by simply importing the CSS file. You can also make use of the animations from jQuery. This project offers a particularly cool demo application.
Magic animations size is moderate as compared to animate.css and it’s become quite famous for its signature animations, such as the magic effects, foolish effects and bomb effects.
If you’re looking for something a little out of the ordinary, I would definitely recommend you to give this animation library a shot in your next project. You won’t be disappointed.
DynCSS is the sort of animation library that you might like to use in your website along with parallax effect. To get a clearer idea of what you can do with this library, take a look at this demo.
DynCSS is a simple library that might grow in popularity in the near future, but it is currently a fairly new project, as demonstrated by its number of stars on GitHub. One of the cool features that this library offers is the rotation of elements with respect to scrolling, which Vittorio demonstrates beautifully on the DynCSS home page (which makes a perfect use case for parallax related pages).
CSShake does exactly what it says on the box – a CSS library for shaking the elements of your webpage. As you might expect, there are a number of variations available for shaking your web components.
Apple has popularized the UI trope of vigorously shaking a UI element (a dialog, modal or textbox) when a user enters an incorrect response – mimicking a person shaking their head ‘no’. CSShake provides a range of interesting “shake” animations and there is no lack of variation in this library.
Though currently the library is more popular than DynCSS, I feel the file-size might not be justified by the functionality it adds. While the animations are good, I can’t think of a great many use cases where you wouldn’t still need to include a second animation library for non-shaking effects.
But perhaps I’m simply lacking imagination?
Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website. It has really nice 2D transitions, along with a host of other well-crafted animations.
Hover.css is best suited for animating page elements such as buttons, logos, SVG components or featured images as is mentioned on the library’s homepage. It has a comprehensive list of animations that accounts for its rather large size (however, I still feel that the size can be much more optimised). Arguably its most notable animation effects are its speech bubbles and curls .
It has a big list of users with companies like Tumblr, WhatsApp, MailChimp, Scribd, Gap and HTC in it’s arsenal.
$.animate(). This works both with and without the presence of jQuery. The reason I felt it needed to be included in this list is that it’s incredibly fast and it features color animation, transforms, loops, easing – essentially it’s the best of jQuery and CSS transitions combined.
Favico.js is designed to target a very specific use case: this library allows you to easily add animation badges to your favicon with your badges being something from a wide array of selections. Web apps that need to notify their users of freshly generated content – i.e. new tweets, emails, posts, articles, etc – can really benefit from this elegant little library.
Check out the demo on it’s website, to get a deeper understanding as to what the framework can do.
Favicon.js is more of a utility animation library suited for animating favicon with badges, images or videos. The size of the library is well optimised for use in production grade projects.
Our next library is interesting for its unique approach. AniJS is an animation library that allows you to add animations to elements in the following format:
If click, On Square, Do wobble animated To .container-box
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
AniJS is a library with a reasonable size according to it’s functionality. It’s format for implementation is quite different as compared to other animation libraries (which many other might find unconventional). This library is worth giving a try at least once for your projects. It’s true that this library is certainly dwarfed by the competition but it has the potential to grow in the future.