Animation Libraries to Use in 2017

Back to Posts

Animation Libraries to Use in 2017

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.


  • Creators: Daniel Eden
  • Released: 2013
  • Current Version: 3.4.0
  • Popularity: 25,000+ stars on GitHub
  • Description: “A cross-browser library of CSS animations. As easy to use as an easy thing.”
  • Library Size: 55.2 kB
  • GitHub:
  • License: MIT

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.


Bounce.js is a tool and javascript library that focusses on providing a selection of unique bouncy CSS animations to your website.


This project is open-source with it’s code on GitHub.

  • Creators: Tictail
  • Released: 2014
  • Current Version: 0.8.2
  • Popularity: 3,500+ stars on GitHub
  • Description: “Create beautiful CSS3 powered animations in no time.”
  • Library Size: 16 kB
  • GitHub:
  • License: MIT

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

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.


  • Creators: Christian
  • Released: 2014
  • Current Version: 1.1.0
  • Popularity: 3,400+ stars on GitHub
  • Description: “CSS3 Animations with special effects”
  • Library Size: 36.5 kB
  • GitHub:

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.


  • Creators: Ian Lunn
  • Released: 2014
  • Current Version: 2.0.2
  • Popularity: 10,700+ stars on GitHub
  • Description: “Easily apply to your own elements, modify or just use for inspiration.”
  • Library Size: 104.2 kB
  • GitHub:
  • License: MIT

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 .


Velocity.js is a sophisticated JavaScript library for animations like Fade & Slide, Scroll, Stop, Finish, Reverse and many others.

It has a big list of users with companies like Tumblr, WhatsApp, MailChimp, Scribd, Gap and HTC in it’s arsenal.


Velocity might not a perfect fit for some as it is a JavaScript animation engine and it is actually an animation engine using the same API as jQuery’s $.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.


  • Creators: Miroslav Magda
  • Released: 2013
  • Current Version: 0.3.9
  • Popularity: 4,900+ stars on GitHub
  • Description: “Make use of your favicon with badges, images or videos.”
  • Library Size: 8.9 kB
  • GitHub:
  • License: MIT

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>
  • Creators: anijs
  • Released: 2014
  • Current Version: 0.9.3
  • Popularity: 2,500+ stars on GitHub
  • Description: “A Library to Raise your Web Design without Coding.”
  • Library Size: 10.5 kB
  • GitHub:
  • License: MIT

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.

Back to Posts