November 2, 2017 at 15:51List of the best web animation tools
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 some worthwhile tool is not present - please write about it and I will add it.
I will also be glad to reviews 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 A
great library with tons of cool plugins and good documentation. Better Performance Compared to Snap.svg and Raphael.js
Minimum Weight: 64kb
Link
Animateplus
Library can be interesting for its lightness. The author does not develop.
Minimum weight: 9kb
Link
Vivus
An excellent library for animating SVG loops, also has a GUI version.
Minimum weight: 11kb
Link
Raphael
A good option if you need to support mammoths like IE6, otherwise look at Snap.svg, Svg.js or any other modern option.
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 good, albeit slightly heavyweight solution for the loader.
Minimum weight: 21kb
Link
SVG Morpheus SVG Morphing
Library. The GSAP plugin solves this problem better, but it is paid, and this tool is free.
Minimum weight: 22kb
Link
Velocity.js A
serious solution for JS animation, used by many great guys and actively supported by the author.
Minimum weight: 43kb
Link
Mojs
Nice library, with rich functionality and declarative interface.
Minimum weight: 130kb
Link
Dom
GSAP
An animation giant of the world front-end. Super-performance and tons of plugins, some of which are unique. In the free version, not all plugins are available, but without them the functionality is very wide.
Minimum weight: 41kb
Link
Anime.js
A rather actively developing library. Very, very compact for its capabilities and has good documentation.
Minimum weight: 11kb
Link
Animo.js
A 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 convenient interface.
Minimum weight: 14kb
Link
Textillate.js A
library for simple text animation, unfortunately, it 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 a "Sprite based animation library", stands out for its lightness.
Minimum weight: 4kb
Link
Animatic
Suitable for simple solutions, boasts a convenient interface.
Minimum weight: 22kb
Link
Just Animate A
fresh library that stands out for its lightness. Actively developed by the author.
Minimum weight: 14kb
Link
Popmotion
A serious and complex thing. The creators position it as a more lightweight analogue of GSAP. It is distinguished by integration into React, relatively light weight and cool work with SVG.
Thank you for the tip exdeniz
Minimum weight: 41kb
popmotion.io > Link
Canvas
CreateJS
Swiss Canvas Knife. There is a good API for canvas and a module for animation and audio. Used as a standard library for exporting HTML5 to Adobe Animate (ex Flash Pro). A very serious thing, suitable for advertising / promo, as well as 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. It is actively developing, quite productive and pleases 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 canvas animation, but also as an abstraction for working with it.
Minimum weight: 248kb
Link
Paper.js
Positions itself as a “Vector graphics scripting framework“. A 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 touch events, animations and everything else. Now in Core there are a lot of different add-on modules that will later be ported to the More part (a la Mootools). For example, it can draw smooth curves through many 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 are Draggable and many different cool things.
Plans for WebGL and SVG.
Thank you for the library Keyten
Minimum weight: 84kb
Link
PixiJS
A very, very serious tool for creating effects, animations and even games. It can render both in WebGL and in Canvas for older platforms. It has tremendous functionality and excellent performance, but its weight is appropriate.
Minimum weight: 414kb
Link
Scroll
AOS A
good 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 latest changes to the library were 2 years ago, it is the most functional solution for scroll animation.
Minimum weight: 17kb
Link
Skrollr
Excellent library for complex animations tied to scroll. It boasts lightness and performance.
Minimum weight: 12kb
Link
Easing
Ceaser
GUI-tool for generating the desired time curves.
Link
Cubic-bezier
A tool for generating time curves, no better and no 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 CSS animator .
Link
CSS Animation Kit A
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 fun.
Link
CSS
Magic animations
A large set of CSS classes with various animations.
Minimum weight: 16kb
Link
Animate.css A
huge collection of CSS classes with animations.
Minimum weight: 17kb
Link
Spinkit
A small set of CSS loaders.
Link
CSSanimate.com A
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 would contribute by commenting with other useful tools, as well as by 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.