Animation Libraries

Animate.css

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 handle animations events

AnimeJS

AnimeJS is fast, lightweight and relatively easy to learn. It is also incredibly versatile and powerful, and can be used to power HTML game animations. It may be an overkill for simple web apps, but it is hard to find fault with

Anime works with: CSS Properties individual CSS transforms SVG DOM attributes JavaScript Objects

Bonsai

Bonsai is a complete toolset for graphics manipulation and animations. It is one of the most powerful libraries available as of today. It comes with an SVG rendered which essentially means you can create SVG with Bonsai as well as use graphics API for manipulation and animations. The key features of Bonsai that make it real powerful are –
Runner and renderer are separated at the core. It supports path morphing assets including images, fonts, audio,video and Keyframe time based animations
There is an online editor as well that gives you playground to try your hands with bonsai.

Bounce.js

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

Lazy Line Painter

Lazy line painter is a small jQuery plugin for SVG path animation. Creating path animations is as easy as exporting the line art from illustrator as .svg , use the “SVG to Lazy Converter” and define the path durations in the code. It uses three steps for creating SVG path animation.

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 make use of the animations from jQuery. This project offers a particularly cool demo application.

ProgressBar.js

This small library is good for creating animated SVG progress bars with your preferred vector graphic editors. It comes packed with basic shapes like line, circle and square etc, but that is just the basics.

RaphaelJS

RaphaelJS follows W3C SVG & DOM standards, and so can be manipulated with JS. It is used for creating and manipulating advanced vector graphics and is supported by many browsers.

Snap.Svg

Snap.svg was created by Dmitry Baranovskiy the guy who also authored RaphaelJS. Snap is open source and can help you to leverage the latest features of SVG including masking, clipping, full gradients, groups and patterns. Snap is for forward thinking designers and targets modern web browsers. It provides you with a simple JavaScript API to assist you in creating animations and making content more engaging.

Snap.svg can be cloned from GitHub.

SVG.JS

SVG stands for scalable vector graphics. It is a lightweight library which is about 11kb.
It is readable, uncluttered and supports animations on size, position, transformations and color. It also supports binding events to elements, opacity masks, clipping paths, text paths and dynamic gradients to name a few.

SVG.JS is here to stay for long for the simple reason that it is modular which makes it a breeze to create extension and plugins to extend the base functionality. It is also well documented so learners can easily find guidance.

Two.JS

Two.JS is the library for playing around with SVG, Canvas and webgl. It focuses completely on 2D shapes. This library relies on the scenegraph and operations like rotation, translation, scale etc. It can be applied easily on the drawn objects. Two.js comes packed with SVG interpreter that ensures that vector graphics created in commercial software’s like Adobe Illustrator etc. can be e asilyimported and manipulated.

Velocity.js

Velocity.js provides the best of jQuery and CSS transitions combined, and uses the same API as jQuery’s $.animate () meaning it can be learnt quickly. It works with and without jQuery. The best thing about velocity library is its full support for SVG element animation which includes SVG specific properties like x, rx, stroke-width etc. Color animation is also supports fill, stroke and stopColor properties of SVG. It also features Transforms, loops, easings and scrolling.

Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile.

Vivus

Vivus is the big daddy of SVG animation when it comes to line drawing. Vivus library has no external dependencies and can run standalone. The library comes with out of the box animation styles and also gives you the option to draw your SVG the way you want it to be.

Walkway

Walkway was created by Connor Atherton and inspired by polygon ps4 review line animation. It is a small library with basic functionalities for path drawing, line and polyline elements. Although these are simple drawings, Walkway does them exceedingly well.

Javascript Animation Libraries comparison