User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Web Animation

A list of awesome web animation libraries, books, apps etc.

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Dec. 3, 2020, 9:11 a.m.

Thank you sergey-pimenov & contributors
View Topic on GitHub:
sergey-pimenov/awesome-web-animation

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

SVG

The JavaScript library for modern SVG graphics.

12.97K
1.15K
3y 63d
Apache-2.0

The lightweight library for manipulating and animating SVG

8.45K
949
17d
n/a

JavaScript library to make drawing animation on SVG

13.4K
1.08K
1y 86d
MIT

An easy way to animate SVG elements.

4.36K
244
2y 5m
MIT

JavaScript Vector Library

10.79K
1.65K
5m
MIT

BonsaiJS is a graphics library and renderer

1.97K
210
6y 99d
n/a

Common

GreenSock's GSAP JavaScript animation library (including Draggable).

11.7K
1.41K
99d
n/a

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

3.25K
924
1y 12m
MIT

JavaScript animation engine

37.46K
2.98K
49d
MIT

The motion graphics toolbelt for the web

16.32K
887
7m
MIT

A powerful little tool for managing CSS animations

2.16K
337
3y 8m
MIT

CSS3 backed JavaScript animation framework

4.59K
714
66d
n/a

Accelerated JavaScript animation.

16.86K
1.59K
4m
MIT

A+ animation module for the modern web

5.69K
302
2y 4m
MIT

CSS animations engine

1.41K
133
4y 61d
MIT

Making Animation Simple

240
17
1y 8m
n/a

Interactive UI animation engine for the Web. Core renderer for Haiku Animator.

729
38
78d
n/a

Lightweight JavaScript (ES6) tweening engine

698
20
2y 67d
MIT

Responsive and slick progress bars

7.32K
1.35K
6m
MIT

cubic-bezier implementation for your JavaScript animation easings โ€“ MIT License

1.28K
112
1y 27d
MIT

Robert Penner's easing functions in GLSL, available as a module for glslify.

285
18
4m
n/a

ES6 version of tween.js

170
32
5d
MIT

CSS

๐Ÿฟ A cross-browser library of CSS animations. As easy to use as an easy thing.

68.5K
15.1K
3d
MIT

๐Ÿ’Ž The powerful Sass library for creating CSS transitions and animations

986
161
2y 5m
MIT

CSS3 Animations with special effects

6.77K
1.12K
4m
MIT

A collection of loading spinners animated with CSS

6.52K
1.02K
12m
MIT

A collection of loading indicators animated with CSS

17.68K
1.7K
9m
MIT

Create beautiful CSS3 powered animations in no time.

6.13K
444
5y 9m
MIT

Canvas

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

7.71K
1.98K
35d
MIT

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

17.36K
2.61K
18d
n/a

The Swiss Army Knife of Vector Graphics Scripting โ€“ Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

12.05K
1.09K
5m
n/a

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

5.64K
540
8d
n/a

A renderer agnostic two-dimensional drawing api for the web.

6.94K
418
62d
MIT

JavaScript library for object-based canvas drawing.

474
74
2y 4m
MIT

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

948
53
1d
MIT

Javascript library to draw and animate images on hover

980
190
7m
MIT

A library for visualization and creative-coding

3.93K
138
3d
Apache-2.0

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

1.35K
138
16d
MIT

Animate on scroll

Animate on scroll library

14.77K
1.63K
2y 62d
MIT

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

7.34K
387
17d
MIT

Reveal CSS animation as you scroll down a page

9.4K
3.76K
1y 8m
n/a

Animate elements as they scroll into view.

19.24K
2.13K
4m
n/a

The javascript library for magical scroll interactions.

12.72K
1.96K
111d
n/a

Animation library that mimics CSS keyframes when scrolling.

477
29
82d
MIT

๐Ÿš€ Performance focused, lightweight scroll animation library ๐Ÿš€

2.73K
148
40d
MIT

Text

Simulate a typewriter effect in vanilla JavaScript.

238
21
2y 8m
MIT

A JavaScript Typing Animation Library

10.15K
1.38K
1y 7d
MIT

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

64
9
4m
n/a

Javascript library for typing animation

14
1
4y 4m
MIT

A JavaScript API for drawing unconventional text effects on the web.

2.71K
202
1y 4m
n/a

React

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

8.34K
217
17d
MIT

Transform SVGs into React components ๐Ÿฆ

7.04K
270
18d
MIT

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

1.35K
138
16d
MIT

GUI tools

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.

Tool for easy and fast creating CSS3 keyframes animation.

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.

Videos