6 Animation Libraries to Save Time and WOW Clients

Saving time, creating more while doing less, and building upon previously successful frameworks are just a few of the benefits of using JavaScript and CSS libraries. Best of all, they’re built to help with all areas of web design and development — including animations, which can be a powerful part of your next client project. We want you to focus less on the logistics of your animations and more on planning, strategizing, and implementing them. That's why we’ve assembled a list of six animation libraries to help build stunning animations for your next client project.

by Sara Chisholm

Last updated 22 Nov 2016

JavaScript and CSS libraries help web designers and developers be better at their jobs, while alleviating common pain points encountered when manually coding elements.

Saving time, creating more while doing less, and building upon previously successful frameworks are just a few of the benefits of using these libraries. Best of all, they’re built to help with all areas of web design and development — including animations, which can be a powerful part of your next client project.

As outlined in Pasquale D’Silva’s theory of transitional interfaces, animations are important to websites because they help users understand changes. Take the effect loading icons have on wait times: if a loading animation stops moving, users assume their task is no longer being performed. Animations can also grab attention quickly, helping reduce bounce rate.

This is why web designers and developers should not only “delight” users with animations, but also create them to serve a functional purpose.

We want you to focus less on the logistics of your animations and more on planning, strategizing, and implementing them. Merging theory with practice, we’ve assembled a list of six animation libraries to help build stunning animations for your next client project.

For more tools, check out our list of favorite Sublime text plugins.

You might also like: How to Upload and Animate SVG Icons in 3 Simple Steps

1. GreenSock

In our recent webinar, creator of CSS-Tricks and co-founder of CodePen Chris Coyier suggests using the GreenSock JavaScript library for creating smooth, fluid, and responsive animations — especially with SVG objects.

Best known for its GreenSock Animation Platform (GSAP), GreenSock is capable of animating every CSS property of DOM elements — width, rotation, scaleX, scaleY, opacity. You name it, GreenSock can animate it with simple tweening and easing.

More specific to SVG, GreenSock has created the MorphSVG plugin for GSAP to easily allow web designers and developers to manipulate one SVG object into another. This is done by allowing the user to identify the starting and ending points in both objects, with the library automatically connecting the dots.

Below is a basic example of using the MorphSVG plugin to transform one shape into a completely different one.

See the Pen Fun with Morph SVG & Greensock by Andrea Roenning (@andreawetzel) on CodePen.

Want to give these tools a spin? GSAP and MorphSVG are completely free to use. GreenSock also offers Draggable — which makes nearly any DOM element draggable — and a SplitText utility, which wraps every HTML word in its own div tag (making paragraphs easier to manipulate when animating).

2. Bounce.js

Whether you decide to use the in-browser application and populate your desired CSS, or dig through the JavaScript library, Bounce.js will help you create smooth transitional animations with ease.

Made by Joel Besada at TicTail, Bounce.js allows both new designers and veterans alike to leverage animation in their upcoming, or existing, client designs by offering the ability to access the repository, or export the code using the web application.

This is an open-source project and is continually updated on GitHub. Bounce.js comes with roughly 10 preset animations (that can be endlessly modified), so it’s perfect for web design and development projects that require a small library with big potential.

Note, should you choose to use the web application and not the library, keep your animations short. This way, less code is generated and there will be less editing to do for the final product. Bounce.js also uses lots of matrix transformations, which may not be ideal for every animation project. This library is completely free to use and MIT licensed, for those looking to experiment with something a little different, or dip their toes into animation.

3. Animate.css

In prior versions of CSS, web designers and developers needed to use JavaScript libraries to animate their desired object, like GreenSock or Bounce.js. All of this changed with the introduction of CSS3, where these same users could now animate objects using CSS, and only CSS.

The Animate.css library is cross-browser supported, and offers users the ability to add delicate animations to their chosen object. Created by Daniel Eden, web designers and developers can choose to add animations like fading, bouncing, zooming, wobbling, or any of the other 46 options to text, objects, forms, and pictures — all through CSS3. And like Bounce.js, Animate.css’s small file size makes it perfect to implement on mobile projects.

Have a look at the example below by Daniel, download the library, and get excited about all of the interesting features you’ll be able to add to your client’s next homepage, slider, or blog.

See the Pen Animate.css by Levi Neuland (@levineuland) on CodePen.

Animate.css is completely free and MIT licensed.

4. Particles.js

Now that we’ve explored three libraries that speak to the overall animation and manipulation of objects, it’s time to look at some examples of libraries created for specific types of animations.

Introducing Particles.js.

Created by Vincent Garreau, Particles.js is a library that allows users to animate series of dots and lines into what looks like particles — constantly connecting and disconnecting from each other.

Web designers and developers can modify the properties of the particles, like what happens when a user hovers over the object, what happens if a user clicks in the space, and the number, color, shape, and size of the particles. Envato’s TutsPlus offers a great step-by-step guide for getting started with Particles.js.

Particles.js is free to use and MIT licensed, so download it and keep it in your back pocket next time your client is looking for something different for their site.

5. Vivus

Vivus is a lightweight JavaScript class created by Max Wellito to animate SVG files, giving them the illusion of being drawn. Vivus has three different animation styles: delayed, sync, and OnebyOne — each one dictating how the SVG will animate as it is drawn out.

Web designers and developers can manipulate the animation styles, as well as the path timing and animation timing to create truly versatile (and unique) SVG drawings for their clients’ sites.

Below is an example of Vivus in action:

See the Pen Vivus js by creotip (@creotip) on CodePen.

To really get a feel for the class, Max has also created an instant version of Vivus, where you can drag-and-drop your SVG into a browser and manipulate it using the specific options on the left.

Interested in using Vivus in your upcoming client project? You’re in luck. Vivus is MIT licensed and free to use.

6. Loader.css

Looking for some nifty loader animations for your next client project? Look no further than Loaders.css. This library is packed with CSS loading icons — making them great for performance-first sites and client projects.

Originally created by Connor Atherton, these icons are designed to affect as few CSS properties as possible, therefore increasing website performance and reducing layout calculations. Loaders.css has also been ported to React, Angular, iOS, and Android — making these beautiful icons available for nearly any device.