awesome-web-animation

Web Animation Resource

A collection of web animation libraries, tools, and resources

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

GitHub
1k stars
20 watching
68 forks
Language: JavaScript
last commit: over 1 year ago
Linked from 3 awesome lists

animationawesomeawesome-listcanvas-animationcss-animationstransitionsweb-animation

Screenshot of sergey-pimenov/awesome-web-animation website

awesome-web-animation.netlify.app

Awesome Web Animation / SVG
Snap.svg 13,962 over 2 years ago The JavaScript library for modern SVG graphics
Svg.js 11,169 4 months ago The lightweight library for manipulating and animating SVG
Vivus 15,254 over 2 years ago Library to make drawing animation on SVG
Walkway 4,369 over 2 years ago An easy way to animate SVG elements
Raphael 11,269 10 months ago JavaScript Vector Library
Bonsai 1,964 almost 7 years ago BonsaiJS is a graphics library and renderer

Awesome Web Animation / Common
GSAP 19,871 4 months ago JavaScript animation library
TweenJS 3,558 11 months ago A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries
Anime.js 50,355 11 days ago JavaScript animation engine
Mojs 18,533 6 months ago The motion graphics toolbelt for the web
Animo.js 2,110 over 7 years ago A powerful little tool for managing CSS animations
Move.js 4,718 over 2 years ago CSS3 backed JavaScript animation framework
Velocity 17,294 about 4 years ago Accelerated JavaScript animation
Animateplus 5,956 over 6 years ago A+ animation module for the modern web
Animatic 1,385 over 1 year ago CSS animations engine
Just Animate 264 over 5 years ago Making Animation Simple
Haiku Core 763 8 months ago Interactive UI animation engine for the Web. Core renderer for Haiku Animator
Between.js 708 over 1 year ago Lightweight JavaScript (ES6) tweening engine
Progressbar.js 7,823 19 days ago Responsive and slick progress bars
Bezier easing 1,740 over 1 year ago Cubic-bezier implementation for your JavaScript animation easings
Glsl easings 447 over 4 years ago Easing functions in GLSL
ES6-tween 186 over 1 year ago ES6 version of tween.js
Weeee.js 3 over 3 years ago Tiny Javascript tweening engine

Awesome Web Animation / CSS
Animate.css 80,864 4 months ago A cross-browser library of CSS animations. As easy to use as an easy thing
Motion-ui 1,159 about 2 months ago The powerful Sass library for creating CSS transitions and animations
Magic 8,450 about 2 years ago CSS3 Animations with special effects
Css-loaders 7,055 7 months ago A collection of loading spinners animated with CSS
SpinKit 19,354 over 4 years ago A collection of loading indicators animated with CSS
Bounce.js 6,211 about 4 years ago Create beautiful CSS3 powered animations in no time

Awesome Web Animation / Canvas
EaselJS 8,145 2 months ago EaselJS is a library for building high-performance interactive 2D content in HTML5
Fabric.js 29,129 4 days ago JavaScript canvas library with animation support
Paper.js 14,507 4 months ago The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas
Konva 11,615 16 days ago Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications
Two.js 8,315 4 days ago A renderer agnostic two-dimensional drawing api for the web with animation support
Ocanvas 488 over 1 year ago JavaScript library for object-based canvas drawing
Curtainsjs 1,678 about 2 months ago Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes
Hover-effect 1,798 over 1 year ago JavaScript library to draw and animate images on hover
Pts.js 5,194 3 months ago Pts is a typescript/javascript library for visualization and creative-coding
tsParticles 7,711 6 days ago tsParticles is a lightweight typescript/javascript library for creating easily particles animations

Awesome Web Animation / Animate on scroll
AOS 26,853 8 months ago Animate on scroll library
Laxxx 10,437 3 months ago Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
Wow 9,921 5 months ago Reveal CSS animation as you scroll down a page
Scrollreveal 22,401 8 months ago Animate elements as they scroll into view
ScrollMagic 14,908 8 months ago The JavaScript library for magical scroll interactions
Motus 631 over 1 year ago Animation library that mimics CSS keyframes when scrolling
Sal 3,602 almost 2 years ago Performance focused, lightweight scroll animation library

Awesome Web Animation / Text
Malarkey 239 almost 4 years ago Simulate a typewriter effect in vanilla JavaScript
Typed.js 15,596 7 months ago A JavaScript Typing Animation Library
Shuffle-text 107 about 2 months ago Shuffle-text is JavaScript text effect library such as cool legacy of Flash
Typebot 18 over 8 years ago JavaScript library for typing animation
Blotter 3,056 over 4 years ago A JavaScript API for drawing unconventional text effects on the web

Awesome Web Animation / React
Motion 24,583 6 days ago Open source, production-ready animation and gesture library for React
SVGR 10,577 3 months ago Transform SVGs into React components
React tsParticles 7,711 6 days ago ReactJS wrapper for
React spring Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use

Awesome Web Animation / GUI tools
Svgartista 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 Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects
Animista 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
Cssanimate 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
Ceaser 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!
Cubic Bezier A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others
Keyframer Tool that help visualize animation components and output the code required
CSS Animation Kit 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

Awesome Web Animation / Videos
Yuri Artyukh youtube channel This man creates amazing web animations using various technologies for this, and recording it all in steam format

Backlinks from these awesome lists:

More related projects: