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: Feb. 26, 2021, 3:04 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.

13.05K
1.15K
3y 4m
Apache-2.0

The lightweight library for manipulating and animating SVG

8.62K
964
44d
n/a

JavaScript library to make drawing animation on SVG

13.51K
1.09K
1y 5m
MIT

An easy way to animate SVG elements.

4.36K
244
2y 8m
MIT

JavaScript Vector Library

10.83K
1.66K
8m
MIT

BonsaiJS is a graphics library and renderer

1.97K
208
6y 6m
n/a

Common

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

12.07K
1.43K
45d
n/a

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

3.27K
956
2y 84d
MIT

JavaScript animation engine

38.28K
3.06K
4m
MIT

The motion graphics toolbelt for the web

16.5K
891
10m
MIT

A powerful little tool for managing CSS animations

2.16K
336
3y 10m
MIT

CSS3 backed JavaScript animation framework

4.61K
714
5m
n/a

Accelerated JavaScript animation.

16.94K
1.6K
6m
MIT

A+ animation module for the modern web

5.73K
304
2y 7m
MIT

CSS animations engine

1.4K
133
4y 4m
MIT

Making Animation Simple

242
16
1y 11m
n/a

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

735
39
5m
n/a

Lightweight JavaScript (ES6) tweening engine

703
22
2y 5m
MIT

Responsive and slick progress bars

7.35K
1.36K
9m
MIT

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

1.32K
115
59d
MIT

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

297
20
7m
n/a

ES6 version of tween.js

172
34
76d
MIT

CSS

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

69.2K
15.3K
4d
MIT

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

996
162
2y 8m
MIT

CSS3 Animations with special effects

6.86K
1.13K
7m
MIT

A collection of loading spinners animated with CSS

6.63K
1.03K
1y 81d
MIT

A collection of loading indicators animated with CSS

17.85K
1.72K
1y 17d
MIT

Create beautiful CSS3 powered animations in no time.

6.14K
441
6y 12d
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.76K
1.99K
58d
MIT

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

18.04K
2.67K
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.24K
1.1K
8m
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.89K
561
7d
n/a

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

7.01K
426
3d
MIT

JavaScript library for object-based canvas drawing.

477
76
2y 7m
MIT

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

1.01K
56
9d
MIT

Javascript library to draw and animate images on hover

1.07K
199
9m
MIT

A library for visualization and creative-coding

3.96K
140
11d
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.55K
153
5d
MIT

Animate on scroll

Animate on scroll library

15.5K
1.7K
2y 4m
MIT

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

7.72K
407
35d
MIT

Reveal CSS animation as you scroll down a page

9.46K
3.88K
1y 11m
n/a

Animate elements as they scroll into view.

19.44K
2.15K
7m
n/a

The javascript library for magical scroll interactions.

12.9K
1.97K
6m
n/a

Animation library that mimics CSS keyframes when scrolling.

496
37
82d
MIT

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

2.81K
154
13d
MIT

Text

Simulate a typewriter effect in vanilla JavaScript.

236
21
2y 11m
MIT

A JavaScript Typing Animation Library

10.5K
1.41K
34d
MIT

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

71
10
7m
n/a

Javascript library for typing animation

14
1
4y 7m
MIT

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

2.75K
204
1y 7m
n/a

React

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

9.65K
253
8d
MIT

Transform SVGs into React components ๐Ÿฆ

7.31K
277
31d
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.55K
153
5d
MIT

Spring-physics based animation library for React applications.

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