{"id":1018,"date":"2018-01-24T01:11:21","date_gmt":"2018-01-24T01:11:21","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1018"},"modified":"2018-12-13T15:50:44","modified_gmt":"2018-12-13T15:50:44","slug":"top-ten-free-animation-libraries-for-the-web","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/top-ten-free-animation-libraries-for-the-web\/","title":{"rendered":"Top Ten Free Animation Libraries For The Web"},"content":{"rendered":"
\n

Animation is one of the key trends for 2018, but you don\u2019t have to reinvent the wheel to add movement to your sites. We look at the best free animation libraries for web projects.<\/p>\n<\/div>\n

You can build some crazy things with UI animations<\/span> on the web. This is quickly becoming the norm for modern websites where user engagement is a big deal.<\/p>\n

If you look around you\u2019ll find plenty of code generators and custom tools<\/span> to help with animation. But you can also find free libraries that\u2019ll save you time in the coding process.<\/p>\n

\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

These are my 10 picks for the best open source web animation libraries. This includes a good mix of JavaScript libraries and CSS-only animations. Both styles are great and they both have their own benefits and drawbacks.<\/p>\n

Either way I guarantee this list will have something you\u2019ll love.<\/p>\n

\n

1. GSAP<\/h2>\n

The GSAP library<\/span><\/a> is one of the coolest free resources available for developers. It runs purely on JavaScript and it\u2019s one of the more robust animation libraries you can use.<\/p>\n

It works on top of HTML5 specs and plays nice with all modern browsers, not to mention the team is constantly updating this library with new features. It can work with SVGs, canvas elements, or even jQuery objects along with other related libraries like EaselJS<\/span><\/a>.<\/p>\n

Definitely worth looking into if you need a powerful web animation library. This can handle simple tasks too but there\u2019s plenty of smaller libraries out there you can try for those.<\/p>\n

\"01-gsap-green-socks-animation\"<\/a><\/div>\n

\n

2. Anime.js<\/h2>\n

When I first found the Anime.js<\/span><\/a> library I was floored. This thing is incredibly powerful and it goes beyond simple UI\/UX animations.<\/p>\n

With Anime.js you can design aesthetic animations with logos, buttons, images, you name it. This supports all the typical user triggers like clicks\/hovers\/swipes and you have access to a bunch of custom-built animations.<\/p>\n

If you have a look at the documentation<\/span><\/a> you can actually find a bunch of examples embedded right into the page. Plus there\u2019s a collection on CodePen<\/span><\/a> full of Anime.js examples to peruse.<\/p>\n

\"02-anime-js-logo\"<\/a><\/div>\n

\n

3. Wicked CSS<\/h2>\n

Here\u2019s one of the newer libraries with a focus on pure CSS code. Wicked CSS<\/span><\/a> works on top of CSS3 properties to offer some pretty incredible results.<\/p>\n

From the main page you\u2019ll find a bunch of live demos you can test right in the browser. These include object rotations, flips, slide-ins, and so many similar animation effects.<\/p>\n

Some of these may be simple enough that you could build them yourself. But others get real complex and that\u2019s what makes the Wicked CSS library so fun to play with.<\/p>\n

\"03-wicked-css3-library\"<\/a><\/div>\n

\n

4. Animate CSS<\/h2>\n

Perhaps the definitive resource for web animation is Animate.css<\/span><\/a>. This open source library was released quite a few years back and it\u2019s still more relevant than ever.<\/p>\n

Developer Daniel Eden created this project as a simplified way to add custom CSS3 animations onto a webpage. Over the years it has grown into a fully-fledged animation library with enough power to run on any major project.<\/p>\n

The homepage offers plenty of demos so you can test out the animation styles and see what you think. Plus there\u2019s a bunch of great documentation on GitHub<\/span><\/a> including a list of classes and some example code snippets.<\/p>\n

\"04-animate-css\"<\/a><\/div>\n

\n

5. Tuesday<\/h2>\n

The one thing I like most about Tuesday<\/span><\/a> is the simplicity<\/em> of these animations. With this library you control how elements appear and disappear from the page.<\/p>\n

But these animations are not over-the-top or super glamorous. Instead they pack a nice subtle punch that really improves the page aesthetic, but doesn\u2019t detract from the content or the user experience.<\/p>\n

I haven\u2019t seen many websites using Tuesday but it is perhaps the cleanest library out there.<\/p>\n

It runs on pure CSS and the animation styles are so darn reasonable. They can blend with any site and you\u2019ve got over a dozen fade in\/fade out styles to work with.<\/p>\n

\"05-tuesday-css-animation\"<\/a><\/div>\n

\n

6. CSShake<\/h2>\n

I\u2019ve yet to see any CSS library as fun or strange as CSShake<\/span><\/a>. This is one part crazy and one part unique so it probably won\u2019t fit with every website.<\/p>\n

The reason it made the list is because I cannot think of any similar library with these features. With CSShake you can power hover animations with shaking effects from all types of styles, all running on pure CSS.<\/p>\n

From mild movements to vigorous shaking and everything inbetween, this library has it all with a pretty easy setup to boot.<\/p>\n

\"06-csshake-shaking-animations\"<\/a><\/div>\n

\n

7. Mo.js<\/h2>\n

Out of the many detailed JavaScript libraries for animation I have to say Mo.js<\/span><\/a> is one of the best. This library is massive and it\u2019s really designed for motion graphics<\/span> over UI\/UX animations.<\/p>\n

But you can use this for anything if you learn how it works. The codes are pretty simple to manipulate and there\u2019s a bunch of tutorials<\/span><\/a> you can follow to make your life easier.<\/p>\n

Is this the perfect animation library? Hardly.<\/p>\n

However it does have a lot <\/em>of amazing features and it really simplifies the animation process whether you\u2019re animating a navbar, a logo, or some other complex object.<\/p>\n

\"07-mo-js-library\"<\/a><\/div>\n

\n

8. Animate Plus<\/h2>\n

For a super lightweight easy-breezy animation library check out Animate Plus<\/span><\/a>. This only weighs 2KB when minified and it\u2019s got all the basic features you\u2019d expect with custom JavaScript animation.<\/p>\n

This is easy to install with npm and you can set it up following the code snippets on GitHub. Most of these are just basic demos so they don\u2019t get into anything complex, but you can find all the options and callback methods right on GitHub as well.<\/p>\n

Have a look at this sample demo<\/span><\/a> pulled straight from the code snippet in the main repo. It\u2019s not much but it\u2019ll show you how to setup Animate Plus and run a bit of default code from scratch.<\/p>\n

\"08-animate-plus-library\"<\/a><\/div>\n

\n

9. Bounce.js<\/h2>\n

With Bounce.js<\/span><\/a> you can make powerful CSS3 and JS animations with just a few clicks.<\/p>\n

On the homepage you\u2019ll find a custom animation builder with a focus on modules first. This way you can add the specific animation features you want onto the page without adding extra code.<\/p>\n

The biggest difference with Bounce.js is that it doesn\u2019t work as just a library. Although you can find setup info on GitHub<\/span><\/a>, it\u2019s not just a basic script. It actually comes with a web builder so Bounce is one of the few animation libraries you can stylize in your browser.<\/p>\n

\"09-bounce-js-script\"<\/a><\/div>\n

\n

10. Magic<\/h2>\n

Fun animations with a dash of playfulness best describes the Magic<\/span><\/a> library.<\/p>\n

This entire collection focuses on CSS3 animations while pushing custom styles that can\u2019t be found elsewhere. It\u2019s a pretty big collection of CSS3 codes and you\u2019ll find a lot of neat tricks in here too. Rotations, perspective flips, fading effects, plenty to go around.<\/p>\n

If you look at the demo page<\/span><\/a> you can check out some of these effects in action.<\/p>\n

Granted this library is still much smaller than other CSS3 libraries so it can\u2019t compete with Tuesday or Animate.css. But it\u2019s got a lot of neat web animations that you just won\u2019t find in other libraries.<\/p>\n

\"10-magic-css-animation-library\"<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Animation is one of the key trends for 2018, but you don\u2019t have to reinvent the wheel to add movement to your sites. We look at the best free animation libraries for web projects. You can build some crazy things with UI animations on the web. This is quickly becoming the norm for modern websites where user […]<\/p>\n","protected":false},"author":2,"featured_media":1019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[93,16],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/02\/Motion.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-gq","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1018"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":1634,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions\/1634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1019"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}