10 Best Free Animation Libraries For The Web
When I first found the Animé.js library I was floored. This thing is incredibly powerful and it goes beyond simple UI/UX animations. With Animé.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 Animé.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.
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.
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.
8. Animate Plus
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.
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.