SVG, Animate it, Control it and Create it using these awesome JS libraries

GreenSock – The standard for modern web animation

This is the mega tool I used in so many cases and suits many cases not only when using SVG files. If your proficient with JS you must already know GreenSock. If not its highly recommended you try it!

AnimeJS – Javascript animation library

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. This is probably the easiest library to work with – and, its works great!

Animate Plus

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile.

SVG.js

A super light JS library for animating (but not only) SVG files. Its easy to use, very popular which means you can find many examples and tutorials online and very powerful. Also, as the description details, SVG.js has no dependencies !

SVG Text Animation

A project by @oubenruing (an amazing project) that would help you convert texts into strokes and then animate them and all inside the browser with no additional tools required! worth visiting. works great, maintained and updated.

TwoJs – Draw svg on the fly inside the browser

A different tool, defined by the creator as “A two-dimensional drawing API geared towards modern web browsers”. This basically means you can dynamically draw SVG shapes inside the browsers. I have yet to use it but it is considered popular for specific projects and is worth mentioning this tools list.

vivus, bringing your SVGs to life

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. Using this library you can apply a wide range of animations and control the speed, delay the animation, run it in sequence, time the animation, sync animations and much more.

Raphaël—JS Library to create SVG

This library helps you create graphics for example a chart, a shape or even images. On the site you will find examples and implementation of this library. Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation as a base for creating graphics

Paper.js – The Swiss Army Knife of Vector Graphics Scripting.

An open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well-designed, consistent and clean programming interface.

Walkway – An easy way to animate SVG images

Walkway is a library created to help us with animating line, path, and polyline elements. Its is actively being developed by a group of contributors and you can use to do a lot of cool animations!

Segment – draw and animate SVG path strokes

A very simple, lightweight JS library that would enable you to draw and also animate paths. But not only that, using Segment.js you can draw a path/stroke between 2 elements and control the timing and appearance.

Meanderer.js Responsive CSS motion paths!

A micro-library for scaling CSS motion path strings. Using meanderer you can move things over a preset path which is truly awesome (and we have all seen similar effects in highlighted websites. Released under MIT license with a lot of examples