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: None

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
4y 18d
Apache-2.0

The lightweight library for manipulating and animating SVG

8.62K
964
9m
n/a

JavaScript library to make drawing animation on SVG

13.51K
1.09K
2y 41d
MIT

An easy way to animate SVG elements.

4.36K
244
3y 118d
MIT

JavaScript Vector Library

10.84K
1.66K
1y 4m
MIT

BonsaiJS is a graphics library and renderer

1.97K
208
7y 54d
n/a

Common

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

12.07K
1.43K
9m
n/a

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

3.27K
956
2y 10m
MIT

JavaScript animation engine

38.28K
3.06K
1y 4d
MIT

The motion graphics toolbelt for the web

16.5K
891
1y 5m
MIT

A powerful little tool for managing CSS animations

2.16K
336
4y 6m
MIT

CSS3 backed JavaScript animation framework

4.61K
714
1y 21d
n/a

Accelerated JavaScript animation.

16.94K
1.6K
1y 78d
MIT

A+ animation module for the modern web

5.73K
304
3y 102d
MIT

CSS animations engine

1.4K
133
5y 16d
MIT

Making Animation Simple

242
16
2y 6m
n/a

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

735
39
1y 33d
n/a

Lightweight JavaScript (ES6) tweening engine

703
22
3y 22d
MIT

Responsive and slick progress bars

7.36K
1.36K
1y 5m
MIT

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

1.32K
115
9m
MIT

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

297
20
1y 93d
n/a

ES6 version of tween.js

172
34
10m
MIT

Tiny Javascript tweening engine.

2
1
4m
MIT

CSS

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

69.2K
15.3K
7m
MIT

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

996
162
3y 118d
MIT

CSS3 Animations with special effects

6.86K
1.13K
1y 98d
MIT

A collection of loading spinners animated with CSS

6.64K
1.03K
1y 10m
MIT

A collection of loading indicators animated with CSS

17.86K
1.72K
1y 8m
MIT

Create beautiful CSS3 powered animations in no time.

6.14K
441
6y 8m
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
9m
MIT

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

18.04K
2.67K
8m
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
1y 117d
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
8m
n/a

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

7.01K
426
7m
MIT

JavaScript library for object-based canvas drawing.

477
76
3y 95d
MIT

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

1.01K
56
8m
MIT

Javascript library to draw and animate images on hover

1.07K
199
1y 5m
MIT

A library for visualization and creative-coding

3.96K
140
8m
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
8m
MIT

Animate on scroll

Animate on scroll library

15.5K
1.7K
3y 17d
MIT

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

7.72K
407
9m
MIT

Reveal CSS animation as you scroll down a page

9.46K
3.88K
2y 7m
n/a

Animate elements as they scroll into view.

19.44K
2.15K
1y 96d
n/a

The javascript library for magical scroll interactions.

12.9K
1.97K
1y 66d
n/a

Animation library that mimics CSS keyframes when scrolling.

496
37
10m
MIT

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

2.81K
154
8m
MIT

Text

Simulate a typewriter effect in vanilla JavaScript.

236
21
3y 6m
MIT

A JavaScript Typing Animation Library

10.5K
1.41K
8m
MIT

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

71
10
1y 100d
n/a

Javascript library for typing animation

14
1
5y 93d
MIT

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

2.75K
204
2y 104d
n/a

React

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

9.65K
253
8m
MIT

Transform SVGs into React components ๐Ÿฆ

7.31K
277
8m
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
8m
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