Right this moment we’re going to run-through 9 free, well-coded animation libraries best-suited to UI design work — masking their strengths and weaknesses, and when to decide on each.
Entrance-end internet design has been by a revolution within the final decade. Within the late noughties, most of us have been nonetheless designing static journal layouts. These days, we’re constructing “digital machines” with hundreds of resizing, coordinated, shifting components.
Fairly merely, nice UI designers must be nice animators too — with a strong working understanding of internet animation methods and tech.
Our High 9 Animation Libraries Listing
- Lottie.js: Nice for vector-based animations at any scale
- Animate.css: Greatest for small, focused UI manipulations
- GreenSock (GSAP): Absolutely-featured however gigantic animation platform able to something from video games to software dev
- Magic Animations
Let’s be clear: Lottiejs is a really totally different kind of animation library to the opposite eight on this record. Nonetheless, we don’t assume UI/UX designers can afford to disregard it.
Making a Lottie animation is extra akin to making a video manufacturing. You’ll want a third-party animation software that may export a ‘Lottie-ready’ JSON file. In reality, the Lottie format was particularly designed to make the Adobe After Results animations work effectively on the internet and cell. This makes Lottie animations quick, environment friendly, simply scripted, and infrequently fairly lovely.
Though Lottie was conceived as an extension to Adobe After Results, there are many (arguably higher) ‘Lottie-native’ alternate options for creating Lottie animations. These embrace:
Lottie makes use of separate ‘animation gamers’ optimized for Internet, iOS, and Android respectively. The Lottie code base is developed and maintained by AirBnb and has an excellent enthusiastic, passionate group rising behind it.
- Creator: AirBnb
- Launched: 2015
- Description: “Lottie is an iOS, Android, and React Native library that renders After Results animations in actual time.”
- GitHub: Lottie Internet – Lottie iOS – Lottie Android
Animate.css is likely one of the smallest and easiest-to-use CSS animation libraries. It’s refined, environment friendly, well-maintained since its 2013 launch.
Making use of the Animate library to your mission is so simple as linking the CSS and including the required CSS lessons to your HTML parts. In fact, you can even use jQuery or vanilla JS to set off the animations on a specific occasion if you happen to choose.
- Creator: Daniel Eden
- Launched: 2013
- Present Model: v4.1.1
- Description: “A cross-browser library of CSS animations. As simple to make use of as a straightforward factor.”
- Library Measurement: 70 kB (minified)
- GitHub: https://github.com/daneden/animate.css
On the time of writing, it’s nonetheless one of the vital in style and widely-used CSS animation libraries and its minified file is sufficiently small for inclusion in cell web sites as properly.
Animate.css continues to be underneath energetic growth. Be careful for model 4, which is able to assist CSS customized properties (aka CSS variables). This is likely one of the easiest and most sturdy animation libraries and we wouldn’t hesitate to make use of this in any mission.
GreenSock (or GSAP – GreenSock Animation Platform) is the Swiss military knife of internet animation. For smooth and complex animations that run easily, GSAP is right. You’ll be able to animate something, from DOM parts to SVGs, and its ecosystem contains some superb plugins that allow you to do all types of enjoyable stuff, e.g., morphing SVGs, drawing SVG strokes, scrolling performance, scrambling textual content, and far more. It’s quick, cross-browser suitable, and its syntax is easy and intuitive.
- Present Model: 3.10.4
- Description: “Extremely high-performance, professional-grade animation for the fashionable internet.”
- Library Measurement: 313 kB (minified folder containing the light-weight obtain of the library)
- GitHub: https://github.com/greensock/GreenSock-JS/
- License: commonplace no cost license, combined with a paid mannequin for particular options and plugins. See the licensing web page for extra particulars.
GSAP is modular, due to this fact you’ll be able to choose and select which components of the library you want to your mission, which is nice for protecting the file dimension underneath management.
Should you’re in search of one thing highly effective however intuitive with superior documentation and group assist, I’d positively advocate you give this animation library a shot in your subsequent mission. You’ll be enthusiastic.
AnimeJS is the latest addition to our record, however has received a fantastic many converts since its creation. It’s extremely versatile and highly effective and wouldn’t be misplaced powering HTML recreation animations. The one actual query is “is it overkill for easy internet apps?”
Possibly. However because it’s additionally quick, small and comparatively simple to be taught, it’s onerous to search out fault with it.
This mission is offered on GitHub.
- Creator: Julian Garnier
- Launched: 2016
- Present Model: v3.2.1
- Library Measurement: 16.8 kB (minified)
- GitHub: https://github.com/juliangarnier/anime
Magic Animations has been one of the vital spectacular animation libraries accessible. It has many various animations, a lot of that are fairly distinctive to this library. As with Animate.css, you’ll be able to implement Magic by merely importing the CSS file. You may as well implement the animations utilizing jQuery. This mission provides a very cool demo software.
- Present Model: 1.4.1
- Description: “CSS3 Animations with particular results”
- Library Measurement: 54.9 kB (minified)
- GitHub: https://github.com/miniMAC/magic
Magic Animation’s file dimension is average in comparison with Animate.css and it’s identified for its signature animations, such because the magic results, silly results, and bomb results.
Should you’re in search of one thing somewhat out of the abnormal, go for it. You received’t be dissatisfied.
<canvas> ingredient or SVGs and produce them to life in clean animations with a smooth 3D impact.
- Present Model: 1.1.0
- Description: “Spherical, flat, designer-friendly
pseudo-3D engine for canvas & SVG”
- Library Measurement: 28 kB (minified)
- GitHub: https://github.com/metafizzy/zdog
CSShake delivers precisely what it says on the field — a CSS library designed particularly for shaking parts inside your internet web page. As you would possibly anticipate, there are a variety of variations accessible for shaking your internet elements.
Apple popularized the UI trope of vigorously shaking a UI ingredient (a dialog, modal or textbox) when a consumer enters an incorrect response — mimicking an individual shaking their head. CSShake gives a spread of fascinating “shake” animations and there’s no lack of variation on this library.
Hover.css is a CSS animation library designed to be used with buttons and different UI parts in your web site. It has very nice 2D transitions, together with a bunch of different well-crafted animations.
- Present Model: 2.3.2
- Description: “Simply apply to your personal parts, modify or simply use for inspiration.”
- Library Measurement: 93.0 kB (minified)
- GitHub: https://github.com/IanLunn/Hover
- License: free private/open-source license and paid business license, relying on necessities. For particulars, learn the licenses part on GitHub.
Hover.css is finest suited to animating discrete web page parts resembling buttons, logos, SVG elements or featured pictures relatively than bigger, complicated web page animations. Arguably, its most notable animation results are its distinctive speech bubbles and curls.
Our closing library is fascinating for its distinctive method. AniJS is an animation library that lets you add animations to parts in a easy ‘sentence-like’ construction. Take the next format:
If click on, On Sq., Do wobble animated To .container-box
<div data-anijs="if: click on, do: flipInY, to: .container-box"></div>
- Creator: Dariel Noel
- Launched: 2014
- Present Model: 0.9.3
- Description: “A Library to Elevate your Internet Design with out Coding.”
- Library Measurement: 10.5 kB
- GitHub: https://github.com/anijs/anijs
AniJS is a library with a really cheap dimension factoring in its performance. The format it makes use of for implementation is sort of authentic and totally different as in comparison with different animation libraries (which many others would possibly discover unconventional).
Nonetheless, this library is value giving a strive, at the very least as soon as to your initiatives.
Which Library Ought to You Select?
There are various animation libraries on the market prepared and ready to be carried out in your mission. These listed above are a number of with the most effective mixture of sophistication and stability.
Should you’re in search of a straightforward to implement, well-tested CSS resolution, Animate.css might be essentially the most versatile, “bang-for-buck” possibility accessible.
In case your artwork model is strongly vector primarily based and you’ve got a Lottie-capable animation software, Lottie’s clean motion and effectivity is tough to disregard.
Though utilizing an animation library in your internet software can definitely enhance interactivity, overdoing it defeats the aim and infrequently confuses the consumer. Watch out and use animations judiciously.
Do you utilize animation libraries to your initiatives? What are your favourite animation libraries?