9 of the Best Animation Libraries for UI Designers — SitePoint

October 08, 2019 0 Comments

9 of the Best Animation Libraries for UI Designers — SitePoint

 

 

This article was updated in October 2019 to reflect the current state of animation libraries. We’re going to run-through 9 free, well-coded animation libraries best-suited to UI design work — covering their strengths and weaknesses, and when to choose each one.

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.

Front-end web design has been through a revolution in the last decade. In the late noughties, most of us were still designing static magazine layouts. Nowadays, we’re building “digital machines” with thousands of resizing, coordinated, moving parts.

Quite simply, great UI designers need to be great animators too — with a solid working understanding of web animation techniques.

Keep in mind that we’re looking at each library from the perspective of a code-savvy UI designer, not as a “code guru” developer. Some of these libraries are pure CSS. Others are JavaScript, but none require anything more than basic HTML/CSS and/or JavaScript understanding to be useful.

Our Top 9 Animation Libraries List

Animate.css is one of the smallest and most easy-to-use CSS animation libraries available. Applying the Animate library to your project is as simple as linking the CSS and adding the required CSS classes to your HTML elements. You can also use jQuery to trigger the animations on a particular event if you prefer.

Animate.CSS

  • Creators: Daniel Eden
  • Released: 2013
  • Current Version: 3.7.2
  • Popularity: 62,284 stars on GitHub
  • Description: “A cross-browser library of CSS animations. As easy to use as an easy thing.”
  • Library Size: 56.7 kB (minified)
  • GitHub: https://github.com/daneden/animate.css
  • License:

At the time of writing, it’s still one of the most popular and widely-used CSS animation libraries and its minified file is small enough for inclusion in mobile websites as well.

Animate.css is still under active development. Watch out for version 4, which will support CSS custom properties (aka CSS variables). This is one of the simplest and most robust animation libraries and we wouldn’t hesitate to use this in any project.

Bounce.js

Bounce.js is a JavaScript animation library that focuses on providing a selection of unique fun, bouncy, Warner Brothers-esque animations to your website.

Bounce.js

  • Creators: Tictail

  • Released: 2014

  • Current Version: 0.8.2

  • Popularity: 5,975 stars on GitHub

  • Description: “Create beautiful CSS3 powered animations in no time.”

  • Library Size: 16 kB

  • GitHub: https://github.com/tictail/bounce.js

  • License:

Bounce.js is a neat animation library that ships with about ten animation presets — hence the small size of the library. As with animate.css, the animations are smooth and flawless. You might want to consider using this library if your needs center around “pop and bubble”-style animation types and could benefit from a lower file size overhead.

AnimeJS

AnimeJS is the newest addition to our list, but has won a great many converts since its creation. It’s incredibly versatile and powerful and wouldn’t be out of place powering HTML game animations. The only real question is “is it overkill for simple web apps?

Maybe. But as it’s also fast, small and relatively easy to learn, it’s hard to find fault with it.

AnimeJS is described as a “lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects”. Pretty awesome.

This project is available on GitHub.

Most impressively, Anime.JS has stunning “documentation” that demonstrates HTML, JavaScript code, and working examples in a beautiful app environment.

In short, if you’re comfortable with a JavaScript animation solution, it’s hard to find reasons to ignore AnimeJS.

GreenSock (GSAP)

GreenSock (or GSAP – GreenSock Animation Platform) is the Swiss army knife of web animation. For sleek and sophisticated animations that run smoothly, GSAP is ideal. You can animate anything, from DOM elements to SVGs, and its ecosystem includes some amazing plugins that let you do all sorts of fun stuff, e.g., morphing SVGs, drawing SVG strokes, scrolling functionality, scrambling text, and much more. It’s fast, cross-browser compatible, and its syntax is straightforward and intuitive.

GreenSock (GSAP)

  • Current Version: 2.1.3

  • Popularity on GitHub: 9,709 stars on GitHub

  • Description: “Ultra high-performance, professional-grade animation for the modern web.”

  • Library Size: 313 kB (minified folder containing the lightweight download of the library)

  • GitHub: https://github.com/greensock/GreenSock-JS/

  • License: standard no charge license, mixed with a paid model for specific features and plugins. See the licensing page for more details.

GSAP is modular, therefore you can pick and choose which parts of the library you need for your project, which is great for keeping the file size under control.

If you’re looking for something powerful but intuitive with awesome documentation and community support, I would definitely recommend you give this animation library a shot in your next project. You’ll be enthusiastic.

Magic Animations

Magic Animations has been one of the most impressive animation libraries available. It has many different animations, many of which are quite unique to this library. As with Animate.css, you can implement Magic by simply importing the CSS file. You can also implement the animations using jQuery. This project offers a particularly cool demo application.

Magic Animations

  • Current Version: 1.4.1

  • Popularity: 6,074 stars on GitHub

  • Description: “CSS3 Animations with special effects”

  • Library Size: 54.9 kB (minified)

  • GitHub: https://github.com/miniMAC/magic

  • License: MIT license.

Magic Animation’s file size is moderate compared to Animate.css and it is known for its signature animations, such as the magic effects, foolish effects, and bomb effects.

If you’re looking for something a little out of the ordinary, go for it. You won’t be disappointed.

Zdog

Zdog is a JavaScript library for creating 3D designs and animations by David DeSandro. With its help, you can draw your designs using the <canvas> element or SVGs and bring them to life in smooth animations with a sleek 3D effect.

Zdog

  • Current Version: 1.1.0

  • Popularity: 6,940 stars on GitHub

  • Description: “Round, flat, designer-friendly

    pseudo-3D engine for canvas & SVG”

  • Library Size: 28 kB (minified)

  • GitHub: https://github.com/metafizzy/zdog

  • License: MIT license.

If you’re familiar with JavaScript, you’ll learn the basics of Zdog pretty quickly: it’s got a straightforward declarative API, great docs and plenty of learning resources. Check out my intro to Zdog on SitePoint.

CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page. As you might expect, there are a number of variations available for shaking your web components.

CSShake

Apple popularized the UI trope of vigorously shaking a UI element (a dialog, modal or textbox) when a user enters an incorrect response — mimicking a person shaking their head. CSShake provides a range of interesting “shake” animations and there’s no lack of variation in this library.

Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website. It has really nice 2D transitions, along with a host of other well-crafted animations.

Hover.css

  • Current Version: 2.3.2

  • Popularity: 21,818 stars on GitHub

  • Description: “Easily apply to your own elements, modify or just use for inspiration.”

  • Library Size: 93.0 kB (minified)

  • GitHub: https://github.com/IanLunn/Hover

  • License: free personal/open-source license and paid commercial license, depending on requirements. For details, read the licenses section on GitHub.

Hover.css is best suited for animating discrete page elements such as buttons, logos, SVG components or featured images rather than larger, complex page animations. Arguably, its most notable animation effects are its distinctive speech bubbles and curls.

Our final library is interesting for its unique approach. AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure. Take the following format:

If click, On Square, Do wobble animated To .container-box

<div data-anijs="if: click, do: flipInY, to: .container-box"></div> 

If you don’t have much familiarity with JavaScript, this may well be a great way to step into JS-choreographed movements.

AniJS

  • Creator: Dariel Noel

  • Released: 2014

  • Current Version: 0.9.3

  • Popularity: 3.524 stars on GitHub

  • Description: “A Library to Raise your Web Design without Coding.”

  • Library Size: 10.5 kB

  • GitHub: https://github.com/anijs/anijs

  • License:

AniJS is a library with a very reasonable size factoring in its functionality. The format it uses for implementation is quite original and different as compared to other animation libraries (which many others might find unconventional).

Nevertheless, this library is worth giving a try, at least once for your projects.

Which Library Should You Choose?

There are many animation libraries out there ready and waiting to be implemented in your project. Those listed above are a few with the best combination of sophistication and stability.

If you’re looking for a simple-to-use, robust CSS solution, Animate.css is probably the most versatile, “bang-for-buck” option available.

If you’re looking for a more complete, powerful JavaScript option, GreenSock and AnimeJS are very hard to split.

Although using an animation library in your web application can certainly improve interactivity, overdoing it defeats the purpose and often confuses the user. Be careful and use animations judiciously.

Do you use animation libraries for your projects? What are your favorite animation libraries?

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.


Tag cloud