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’stheory of transitional interfaces, animations are important to websites because they help users understand changes. Take theeffect 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 reducebounce 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 favoriteSublime text plugins.
You might also like:How to Upload and Animate SVG Icons in 3 Simple Steps
1. GreenSock
In our recent webinar, creator ofCSS-Tricksand co-founder ofCodePenChris Coyier suggests using theGreenSockJavaScript 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 theMorphSVGplugin 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 PenFun with Morph SVG & Greensockby Andrea Roenning (@andreawetzel) onCodePen.
Want to give these tools a spin? GSAP and MorphSVG are completely free to use. GreenSock also offersDraggable— which makes nearly any DOM element draggable — and aSplitTextutility, which wraps every HTML word in its owndivtag (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.jswill help you create smooth transitional animations with ease.
Made byJoel BesadaatTicTail, 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 onGitHub. 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.
TheAnimate.csslibrary is cross-browser supported, and offers users the ability to add delicate animations to their chosen object. Created byDaniel 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 PenAnimate.cssby Levi Neuland (@levineuland) onCodePen.
Animate.css is completely free and MIT licensed.
4. Particles.js
既然我们已经探索三个库说to the overall animation and manipulation of objects, it’s time to look at some examples of libraries created for specific types of animations.
IntroducingParticles.js.
Created byVincent 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 greatstep-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
Vivusis a lightweight JavaScript class created byMax Wellitoto 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 PenVivus jsby creotip (@creotip) onCodePen.
To really get a feel for the class, Max has also created aninstant 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 thanLoaders.css. This library is packed with CSS loading icons — making them great for performance-first sites and client projects.
Originally created byConnor 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 toReact,Angular,iOS, andAndroid— making these beautiful icons available for nearly any device.
Loaders.css is free to use and MIT licensed, making it a valuable resource for your design toolkit.
Do you have a favorite animation library? Let us know which ones you love and why in the comments below.
You might also like:Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement