Design & UX
Article

Top 9 Animation Libraries to Use in 2016

By Tanay Pant

The modern web is rife with amazing, eyeball-capturing motion. Today web developers use a wide array of techniques to engage, entertain, inform and direct their visitors and animation helps us in achieving that goal.

A decade ago developers typically employed Adobe Flash to add interactivity to their sites, but with the rapid development of HTML5, CSS3 and a myriad JavaScript libraries, Flash has (thankfully?) taken a back seat.

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

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

  • 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: https://github.com/daneden/animate.css
  • 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

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

Bounce.js

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: https://github.com/tictail/bounce.js
  • 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.

Magic Animations

  • 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: https://github.com/miniMAC/magic

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

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

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

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.

CSShake

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

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

  • 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: https://github.com/IanLunn/Hover
  • 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

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 JS

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

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.

favico.js

  • 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: https://github.com/ejci/favico.js
  • 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.

AniJS

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: https://github.com/anijs/anijs
  • 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.

Conclusion

There are many animation libraries out there ready and waiting to be implemented in your project. Those listed above are a few with the best combination of sophistication and stability. Although using an animation library in your web application can certainly improve interactivity, overdoing it defeats the purpose and often confuses the user. Be careful and use them judiciously.

Do you use animation libraries for your projects? What are your favourite animation libraries?

Meet the author
Tanay Pant is an Indian author, hacker, developer and tech enthusiast. He is known for his work on Learning Firefox OS Application Development, which was published by Packt. He is also an official representative of Mozilla, and has been listed in the about:credits of the Firefox web browser. His personal website is tanaypant.com.
  • sdras

    No GreenSock? That’s a pretty big one to miss :)

  • sdras

    No GreenSock? That’s a pretty big one to miss :)

  • Simon Swartz

    Where is GreenSock TweenMax / Lite?

  • Maxime Freschard

    + GSAP of course

  • Admiral Ackbar

    Yep seriously GSAP should be at the top of this list

  • somascope

    It looks like this is more focused on the UI animation end of things (which many folks do gravitate to), rather than what can be done with GSAP/TweenMax. Still nice information, but lack the fuller-featured, creative direction capabilities of conceptual animations.

  • gskema

    I’ve always know about animate.css and other libs, but never actually used one. What would be a typical use case? What’s the workflow?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.