10 JavaScript SVG Animation Libraries

SVG animations can get a little complicated, but these libraries make it extremely simple for anyone to add animation to their site. In this post i’ve collected 10 Javascript SVG animation libraries that allow you to create some really impressive animations that can literally take your animations and UIs to the next level.

jQuery DrawSVG

Lightweight, simple to use jQuery plugin to animate SVG paths.

jQuery DrawSVG

Vivus.js

Vivus is a lightweight JavaScript class that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

vivus

Animation Engine for Vector Graphic

Enliven ’em is a jQuery plugin which lets you animate any vector graphic presented as SVG files in many different ways when your vector illustrations become visible in a user’s browser viewport. Also you can allow an animation to be repeated when user click or tap your graphic.

Animation Engine for Vector Graphic

Lazy Line Painter

A jQuery plugin for path animation using the CSS.

lazy line painter

Trigons

Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations. Trigons script is coded as plugin for d3.js library (d3js.org) and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.

Segment

A little JavaScript class (without dependencies) to draw and animate SVG path strokes.

segment

Trigons

Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations. Trigons script is coded as plugin for d3.js library (d3js.org) and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.

trigon

SVG.JS

A lightweight library for manipulating and animating SVG. Svg.js has no dependencies and aims to be as small as possible.

SVG.JS

Animate Plus

Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

Animate Plus

Walkway.js

An easy way to animate SVG elements.

walkaway

Wheelnav

Wheel navigation JavaScript library built on SVG . It can be tab navigation, pie menu, sub menu and more

wheelnav