Awesome Web Animation

This list contains the most useful tools and data for creating web animations. * Any libraries that help animate anything in the browser - Canvas, SVG, text, scroll etc. * Books about animation in the browser. * GUI tools for animation that can be exported to the browser.

Contents

• SVG
• Common
• CSS
• Canvas
• Animate on scroll
• Text
• GUI tools
• React
• Books
• Videos

SVG

• Snap.svg - The JavaScript library for modern SVG graphics.
• Svg.js - The lightweight library for manipulating and animating SVG.
• Vivus - Library to make drawing animation on SVG.
• Walkway - An easy way to animate SVG elements.
• Raphael - JavaScript Vector Library.
• Bonsai - BonsaiJS is a graphics library and renderer.

Common

• GSAP - JavaScript animation library.
• TweenJS - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
• Anime.js - JavaScript animation engine.
• Mojs - The motion graphics toolbelt for the web.
• Animo.js - A powerful little tool for managing CSS animations.
• Move.js - CSS3 backed JavaScript animation framework.
• Velocity - Accelerated JavaScript animation.
• Animateplus - A+ animation module for the modern web.
• Animatic - CSS animations engine.
• Just Animate - Making Animation Simple.
• Haiku Core - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
• Between.js - Lightweight JavaScript (ES6) tweening engine.
• Progressbar.js - Responsive and slick progress bars.
• Bezier easing - Cubic-bezier implementation for your JavaScript animation easings.
• Glsl easings - Easing functions in GLSL.
• ES6-tween - ES6 version of tween.js.
• Weeee.js - Tiny Javascript tweening engine.

CSS

• Animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.
• Motion-ui - The powerful Sass library for creating CSS transitions and animations.
• Magic - CSS3 Animations with special effects.
• Css-loaders - A collection of loading spinners animated with CSS.
• SpinKit - A collection of loading indicators animated with CSS.
• Bounce.js - Create beautiful CSS3 powered animations in no time.

Canvas

• EaselJS - EaselJS is a library for building high-performance interactive 2D content in HTML5.
• Fabric.js - JavaScript canvas library with animation support.
• Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
• Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
• Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.
• Ocanvas - JavaScript library for object-based canvas drawing.
• Curtainsjs - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
• Hover-effect - JavaScript library to draw and animate images on hover.
• Pts.js - Pts is a typescript/javascript library for visualization and creative-coding.
• tsParticles - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.