List of best tools for web animation

List of the best tools for web-animation. SVG / CSS / Canvas / DOM animation + GUI tools for generating Bezier curves and CSS animations.

In the future, the list will be supplemented by books and video courses on web-animation. If you notice that there is no standing instrument present - please write about it and I will add it.
')
I will also be happy to review the tools from the current list, with the help of your feedback I can make the description of the tools more complete.



Categories:
Svg
Canvas
Dom
CSS
Easing
GUI
Scroll

Svg

Snap.svg



One of the most popular libraries for SVG. Not only for animation, but also for convenient work with SVG in general. Modern version of Raphael.js

Minimum weight: 81kb
Link

---

SVG.js



Excellent library with lots of cool plugins and good documentation. Best performance compared to Snap.svg and Raphael.js

Minimum weight: 64kb
Link

---

Animateplus



The library may be interesting for its lightness. The author does not develop.

Minimum weight: 9kb
Link

---

Vivus



An excellent library for animating SVG contours, also has a GUI version.

Minimum weight: 11kb
Link

---

Raphael



A good option if you need to support such mammoths as IE6, otherwise look at Snap.svg, Svg.js or any other modern version.

Minimum weight: 91kb
Link

---

Walkway



A good library for animating SVG contours, stands out for its lightness.

Minimum weight: 4kb
Link

---

BonsaiJS



Interesting as an exhibit, the author does not develop, unfortunately.

Minimum weight: 130kb
Link

---

ProgressBar.js



A nice, albeit slightly heavy solution for the loader.

Minimum weight: 21kb
Link

---

Svg morpheus



Library for morphing SVG. The plug-in for GSAP solves this problem better, but it is paid, and this tool is free.

Minimum weight: 22kb
Link

---

Velocity.js



Serious solution for JS animation, used by many big guys and actively supported by the author.

Minimum weight: 43kb
Link

---

Mojs



Good library, with rich functionality and declarative interface.

Minimum weight: 130kb
Link

---

Dom

GSAP



Animation giant of the world front-end. Super-performance and weight of plug-ins, some of which are unique. Not all plugins are available in the free version, however, even without them, the functionality is very wide.

Minimum weight: 41kb
Link

---

Anime.js



Enough actively developing library. Very, very compact for its capabilities and has good documentation.

Minimum weight: 11kb
Link

---

Animo.js



Very small utility, if the size of the library is very critical, then you can consider it.

Minimum weight: 6kb
Link

---

Move.js



A good solution and a lightweight solution with a user-friendly interface.

Minimum weight: 14kb
Link

---

Textillate.js



The library for simple text animation unfortunately needs quite heavy dependencies (such as jQuery).

Minimum weight: 8kb
Link

---

Firmin



Interesting as an exhibit, long abandoned by the author.

Minimum weight: 8kb
Link

---

Alicejs



Interesting as an exhibit, long abandoned by the author.

Minimum weight: 50kb
Link

---

Motio



Positions itself as the “Sprite based animation library”, stands out for its lightness.

Minimum weight: 4kb
Link

---

Animatic



Suitable for simple solutions, boasts a user-friendly interface.

Minimum weight: 22kb
Link

---

Just animate



Fresh library, stands out lightness. Actively developing by the author.

Minimum weight: 14kb
Link

---

Popmotion



Serious and complex thing. The creators are positioning it as a more lightweight analogue of GSAP. It stands out for integration into React, relatively low weight and cool work with SVG.
Thanks for the tip exdeniz

Minimum weight: 41kb
<a href=35 popmotion.io> Link

---

Canvas

CreateJS



Swiss knife for Canvas. There is a good API for canvas and a module for animation, and for audio. Used as a standard library for exporting HTML5 to Adobe Animate (ex Flash Pro). Very serious thing, suitable for advertising / promo, and for creating HTML5 games.

Minimum weight: 186kb
Link

---

Bhive



May be interesting as an exhibit. The author does not develop.

Minimum weight: 36kb
Link

---

Two.js



An interesting library that can render in Canvas, SVG and even WebGl. Actively developing, quite productive and happy with functionality.

Minimum weight: 50kb
Link

---

Ocanvas



Minimum weight: 73kb
Link

---

Positioned as “Object-based canvas drawing“. The author is not abandoned.

Fabric.js



Suitable not only for animation Canvas, but also as an abstraction for working with him.

Minimum weight: 248kb
Link

---

Paper.js



Positions itself as the "Vector graphics scripting framework". Serious and intensively developing tool.

Minimum weight: 277kb
Link

---

Konva



A good tool for animation and in general for working with Canvas.

Minimum weight: 138kb
Link

---

Deltajs



Implements vector graphics on top of Canvas with mouse and tache events, animation, and everything else. Now in Core there are a lot of different additional modules that will later be transferred to the More part (a la Mootools). For example, it can draw smooth curves through a multitude of points, animate the movement of an object along a path, animate the transformation of one curve into another (including different types - for example, the Lagrange curve into a Bezier curve), there is a Draggable and many different cool things.
The plans of WebGL and SVG.

Thanks for the library Keyten

Minimum weight: 84kb
Link

---

PixiJS



Very, very serious tool for creating effects, animations and even games. It can render both in WebGL and in Canvas for old platforms. It has the greatest functionality and excellent performance, but its weight is appropriate.

Minimum weight: 414kb
Link

---

Scroll

AOS



A nice simple library for scrolling animations, suitable for simple tasks.

Minimum weight: 13kb
Link

---

Wow.js



A simple solution for scrolling animations. For commercial use is not free.

Minimum weight: 13kb
Link

---

ScrollReveal



Lightweight and free for commercial use.

Minimum weight: 9kb
Link

---

ScrollMagic



Despite the fact that the last library changes were 2 years ago, it is the most functional solution for scrolling animation.

Minimum weight: 17kb
Link

---

Skrollr



Excellent library for complex animations attached to the scroll. It boasts lightness and performance.

Minimum weight: 12kb
Link

---

Easing

Ceaser



GUI tool for generating desired time curves.

Link

---

Cubic-bezier



A tool for generating time curves, no better or worse than others.

Link

---

Bezier easing



Another tool for generating time curves.

Link

---

GUI

Stylie



GUI tool for generating CSS animations.

Link

---

Keyframer



Another GUI tool for generating CSS animations.

Link

---

CSS loaders



A small set of CSS loaders. It is possible to customize colors.

Link

---

Bounce.js



A good generator of CSS animations.

Link

---

CSS Animation Kit



GUI tool for generating CSS animations. No better and no worse than others.

Link

---

---

Animista



At the moment - the most functional and interesting GUI-tool. You can try at least for the sake of interest.

Link

---

CSS

Magic animations



A large set of CSS classes with different animations.

Minimum weight: 16kb
Link

---

Animate.css



A large collection of CSS classes with animations.

Minimum weight: 17kb
Link

---

Spinkit



A small set of CSS loaders.

Link

---

CSSanimate.com



GUI tool for generating CSS animations.

Link

---

CSS3 Animation Cheat Sheet



A small library of CSS classes with animations.

Minimum weight: 12kb
Link

---

I would be grateful if you contribute your comments with other useful tools, as well as commits in a separate repository created specifically for this.

In addition, a GUI version of the catalog is available with filters by category and size.