The Best Animation Libraries of 2016

The web is filled with amazing and hypnotic animations. Today, developers use a wide variety of techniques to create engagement, entertain, and inform web users, and animation helps us accomplish this goal.
10 years ago, developers used Adobe Flash to add interactivity to their sites, but with the advent of HTML5, CSS3 and a myriad of JavaScript libraries, Flash has (thankfully) disappeared from the landscape.
There is a large quantity of animation library and I will present 9 of them to you, according to 3 criteria: simplicity of implementation, features offered and popularity.

Animate.css

Animated
Animate.css is one of the most efficient and easy to use CSS libraries available. It is easy to implement since it suffices to add the CSS classes to the HTML elements.

  • Creator: Daniel Eden
  • Publication date: 2013
  • Current Version: 3.4.0
  • Popularity: 25,000+ stars on GitHub
  • Description: "A cross-browser CSS animation library. Easy as pie. "
  • 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 and lightweight enough to use in mobile sites. Personally, I think it's one of the best animation libraries and I recommend it for your next project.

bounce.js

bounce
Bounce.js is a Javascript tool and library that focuses on “bouncing” animations for your website. Bounce.js is an Open-source project with its source code on GitHub.

  • Creator: Tictail
  • Publication date: 2014
  • Current Version: 0.8.2
  • Popularity: 3,500+ stars on GitHub
  • Description: "Create beautiful CSS3 powered animations in a flash. "
  • Library size: 16 kB
  • GitHub: https://github.com/tictail/bounce.js
  • License: MIT

Bounce.js is a good animation library that includes about ten predefined animations, which explains its lightness. Like animate.css, the animations are smooth and flawless. Recommended if you don't need a wide variety of animation and the lightness of the library is an asset for your project.

Magic Animations

magic
Magic Animations is one of the most impressive libraries. There are many animations, some of which are completely unique. As with Animate.css, you can implement Magic by simply importing the CSS file. This project offers a particularly successful Demo.

  • Magic Animations
  • Creator: Christian
  • Publication date: 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

The size of magic animations remains reasonable compared to Animate.css and has become famous for some special effects like magic effects, foolish effects and bomb effects.
If you're looking for something out of the ordinary, I definitely recommend checking it out for your next project. You will not be disappointed.

DynCSS

dyncss
DynCSS is the kind of animation library that you might like to use in your sites applying the parallax effect. To get an idea of ​​what it will allow you to do, take a look at this demo.

  • Creator: Vittorio Zaccaria, author of “Notes for Designing Better Mobile Application Interfaces” and “Developing 3D Games with Unity 5”
  • Publication Date: 2014
  • Current Version: 0.8.1
  • Popularity: 190+ stars on GitHub
  • Description: "Bring your site to life with Dynamic CSS. "
  • GitHub: https://github.com/vzaccaria/DynCSS

DynCSS is a simple library that may become popular in the near future, but is still a recent project as evidenced by the star rating on Github. One of the cool features is that the library offers to animate elements based on scrolling, which Vittorio demonstrates elegantly on the DynCSS homepage (which makes great use of parallax).

css shake

cssshake
CSShake does exactly what it says on the box, a CSS library to shake up your webpage elements. As you might expect, there are many variations to shake all web components

  • Creator: Lionel
  • Publication date: 2014
  • Popularity: 2,000+ stars on GitHub
  • Description: "CSS classes to move your DOM!"
  • Library size: 78.8 kB
  • GitHub: https://github.com/elrumordelaluz/csshake
  • License: MIT

Apple popularized the UI trend of vigorously shaking UI elements (dialog box, modal window, textbox) when the user enters an incorrect answer – referring to a person shaking their head to say “no”. CSShake offers a range of interesting “shake” animations and the library has no shortage of variants.
Although this library is more popular than DynCSS, I feel that the size is not justified by the additional features it brings. Although the animations are good, I can't imagine cases where there wouldn't be a need to include other libraries for all the non-shaking effects.
But maybe I just lack imagination?

hover.css

hover
Hover.css is a CSS animation library designed for use with buttons and other UI components on your website. It offers beautiful 2D transitions, with a myriad of thoughtful animations.

  • Creator: Ian Lunn
  • Publication date: 2014
  • Current Version: 2.0.2
  • Popularity: 10,700+ stars on GitHub
  • Description: "Easily apply to your projects, edit, or…just for inspiration. "
  • Library size: 104.2 kB
  • GitHub: https://github.com/IanLunn/Hover
  • License: MIT

Hover.css is particularly suitable for animating page elements such as buttons, logos, SVG components or images as mentioned on the library's homepage. It has an exhaustive list of animations, which explains its large size (I also think that its size could be further optimized). Perhaps the most remarkable effect is the speech bubbles and loops.

velocity.js

velocity
Velocity.js is a sophisticated JavaScript library for animations like Fade & Slide, Scroll, Stop, Finish, Reverse and many more.
She has a large list of users with companies like Tumblr, WhatsApp, MailChimp, Scribd, Gap, and HTC in her roster.

  • Creator: Julian Shapiro
  • Publication date: 2014
  • Current Version: 1.2.2
  • Popularity: 8,700+ stars on GitHub
  • Description: "Fast JavaScript Animations. "
  • Library size: 34.8 kB
  • GitHub: https://github.com/julianshapiro/velocity
  • License: MIT

Velocity is not necessarily suitable for everyone since it is a JavaScript animation engine and this JavaScript animation engine uses the same API as jQuery $.animate(). It works with and without the presence of jQuery. The reason I felt it necessary to include it in this list is that it's incredibly fast and features color animation, transforms, loops, easing – it's the best of jQuery and CSS transitions combined.

favico.js

favico
Flavico is designed for a very specific use case: this library allows you to easily add badge animations to your favicons, badges being something potentially very varied. Webapps that need to notify their users of the presence of updated content (for example: new tweets, emails, posts, articles, etc.) will be able to make very good use of this elegant library. Take a look at their site to better understand what this framework allows you to do.

  • Creator: Miroslav Magda
  • Publication date: 2013
  • Current Version: 0.3.9
  • Popularity: 4,900+ stars on GitHub
  • Description: "Use your favicons with badges, images or videos. "
  • Library size: 8.9 kB
  • GitHub: https://github.com/ejci/favico.js
  • License: MIT

Favicon.js is more of an animation utility suitable for badges, images, and videos. The size of the library is well optimized for production use.

AniJS

The next library is interesting because of its unique approach. AniJS is an animation library that lets you add animations to elements using a DSL (Domain-Specific Language) as following :

If click, On Square, Do wobble animated To .container-box

  • Creator: anijs
  • Publication date: 2014
  • Current version: 0.9.3
  • Popularity: 2,500+ stars on GitHub
  • Description: "A library to increase your webdesign without coding. "
  • Library size: 10.5 kB
  • GitHub: https://github.com/anijs/anijs
  • License: MIT

AniJS is a reasonably sized library considering its functionality. The implementation format is quite different compared to other animation libraries (which sometimes seem obscure). This library is worth trying, at least once for your projects. It is true that it seems very small compared to the competition but it has the potential to grow in the future.

Conclusion

There are many libraries waiting to be implemented in your projects. Those presented above are a selection of the best combinations of sophistication and stability. Although using an animation library in your projects can certainly improve interactivity, if abused, animation produces the opposite effect to that expected and confuses the user. Be careful and use it wisely.
And you, what are your favorite animation libraries?
Original Article de Tanay Pant
www.sitepoint.com/top-9-animation-libraries-use-2016/
Translated from English by JS Staff
Antoine @JS-Republic
 
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]