awesome-web-animation

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

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

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

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

AOS

Animate on scroll library

Laxxx

Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!

Wow

Reveal CSS animation as you scroll down a page

Scrollreveal

Animate elements as they scroll into view

ScrollMagic

The JavaScript library for magical scroll interactions

Motus

Animation library that mimics CSS keyframes when scrolling

Sal

Performance focused, lightweight scroll animation library

Malarkey

Simulate a typewriter effect in vanilla JavaScript

Typed.js

A JavaScript Typing Animation Library

Shuffle-text

Shuffle-text is JavaScript text effect library such as cool legacy of Flash

Typebot

JavaScript library for typing animation

Blotter

A JavaScript API for drawing unconventional text effects on the web

Motion

Open source, production-ready animation and gesture library for React

SVGR

Transform SVGs into React components

React tsParticles

ReactJS wrapper for

Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use

SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind

Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects

Animista is a place where you can play with a collection of pre-made css animations, tweak them and get only those you will actually use

Welcome to CssAnimate.com, tool for easy and fast creating CSS3 keyframes animation, right in your browser without using any desktop software. If you want to render complex and consistent CSS3 animation on your site this tool is made for you! You can create complex CSS3 keyframe animation without any coding and to get ready made css styles for using on your site

Now that we can use CSS transitions in all the modern browsers, let's make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you're anything like me*, you probably thought this about the default easing options: “ease-in, ease-out etc.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others

Tool that help visualize animation components and output the code required

Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point

This man creates amazing web animations using various technologies for this, and recording it all in steam format