Monday, 22 January, 2018 UTC
Summary
You can build some crazy things with UI animations on the web. This is quickly becoming the norm for modern websites where user engagement is a big deal.
If you look around you’ll find plenty of code generators and custom tools to help with animation. But you can also find free libraries that’ll save you time in the coding process.
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.
Either way I guarantee this list will have something you’ll love.
1. GSAP
The GSAP library is one of the coolest free resources available for developers. It runs purely on JavaScript and it’s one of the more robust animation libraries you can use.
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.
Definitely worth looking into if you need a powerful web animation library. This can handle simple tasks too but there’s plenty of smaller libraries out there you can try for those.
2. Anime.js
When I first found the Anime.js library I was floored. This thing is incredibly powerful and it goes beyond simple UI/UX animations.
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.
If you have a look at the documentation you can actually find a bunch of examples embedded right into the page. Plus there’s a collection on CodePen full of Anime.js examples to peruse.
3. Wicked CSS
Here’s one of the newer libraries with a focus on pure CSS code. Wicked CSS works on top of CSS3 properties to offer some pretty incredible results.
From the main page you’ll 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.
Some of these may be simple enough that you could build them yourself. But others get real complex and that’s what makes the Wicked CSS library so fun to play with.
4. Animate CSS
Perhaps the definitive resource for web animation is Animate.css. This open source library was released quite a few years back and it’s still more relevant than ever.
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.
The homepage offers plenty of demos so you can test out the animation styles and see what you think. Plus there’s a bunch of great documentation on GitHub including a list of classes and some example code snippets.
5. Tuesday
The one thing I like most about Tuesday is the simplicity of these animations. With this library you control how elements appear and disappear from the page.
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’t detract from the content or the user experience.
I haven’t seen many websites using Tuesday but it is perhaps the cleanest library out there.
It runs on pure CSS and the animation styles are so darn reasonable. They can blend with any site and you’ve got over a dozen fade in/fade out styles to work with.
6. CSShake
I’ve yet to see any CSS library as fun or strange as CSShake. This is one part crazy and one part unique so it probably won’t fit with every website.
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.
From mild movements to vigorous shaking and everything inbetween, this library has it all with a pretty easy setup to boot.
7. Mo.js
Out of the many detailed JavaScript libraries for animation I have to say Mo.js is one of the best. This library is massive and it’s really designed for motion graphics over UI/UX animations.
But you can use this for anything if you learn how it works. The codes are pretty simple to manipulate and there’s a bunch of tutorials you can follow to make your life easier.
Is this the perfect animation library? Hardly.
However it does have a lot of amazing features and it really simplifies the animation process whether you’re animating a navbar, a logo, or some other complex object.
8. Animate Plus
For a super lightweight easy-breezy animation library check out Animate Plus. This only weighs 2KB when minified and it’s got all the basic features you’d expect with custom JavaScript animation.
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’t get into anything complex, but you can find all the options and callback methods right on GitHub as well.
Have a look at this sample demo pulled straight from the code snippet in the main repo. It’s not much but it’ll show you how to setup Animate Plus and run a bit of default code from scratch.
9. Bounce.js
With Bounce.js you can make powerful CSS3 and JS animations with just a few clicks.
On the homepage you’ll 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.
The biggest difference with Bounce.js is that it doesn’t work as just a library. Although you can find setup info on GitHub, it’s 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.
10. Magic
Fun animations with a dash of playfulness best describes the Magic library.
This entire collection focuses on CSS3 animations while pushing custom styles that can’t be found elsewhere. It’s a pretty big collection of CSS3 codes and you’ll find a lot of neat tricks in here too. Rotations, perspective flips, fading effects, plenty to go around.
If you look at the demo page you can check out some of these effects in action.
Granted this library is still much smaller than other CSS3 libraries so it can’t compete with Tuesday or Animate.css. But it’s got a lot of neat web animations that you just won’t find in other libraries.
| Mega Bundle of Illustrator Brushes from Artifex Forge – only $21! |
|