Track Awesome Web Animation Updates Daily

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

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 sergey-pimenov/awesome-web-animation · ⭐ 1.6K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Sep 21, 2026

SVG

• Lazy Line Painter (⭐2k) - A modern JavaScript library for SVG path animation.

• Flubber (⭐6.9k) - Tools for smoother SVG shape morphing and interpolation.

• Lottie (⭐32k) - Render After Effects animations natively on the web as SVG or Canvas.

Common

• Theatre.js (⭐13k) - Motion design editor for the web.

• Popmotion (⭐20k) - Simple animation libraries for delightful user interfaces.

• AutoAnimate (⭐14k) - Zero-config, drop-in animation utility for smooth DOM transitions.

• KUTE.js (⭐2.6k) - JavaScript animation engine for modern browsers.

• Rive (⭐968) - Web runtime for interactive Rive animations.

CSS

• AnimXYZ (⭐2.5k) - Composable CSS animation toolkit powered by CSS variables.

• Hover.css (⭐29k) - A collection of CSS3 powered hover effects.

• CSShake (⭐4.9k) - CSS classes to shake your DOM.

• Whirl (⭐1.8k) - CSS loading animations with minimal effort.

• CSS Doodle (⭐6k) - A web component for drawing patterns with CSS.

Canvas

• PixiJS (⭐48k) - Fast 2D WebGL renderer for interactive graphics and animation.

• p5.js (⭐24k) - Creative coding library for drawing and animation on canvas.

• Zdog (⭐11k) - Round, flat, designer-friendly pseudo-3D engine for canvas and SVG.

• canvas-confetti (⭐13k) - Performant confetti animation in the browser.

• Vanta.js (⭐7k) - Animated 3D backgrounds for your website.

• Three.js (⭐116k) - JavaScript 3D library.

• Matter.js (⭐18k) - A 2D rigid body physics engine for the web.

Animate on scroll

• Lenis (⭐16k) - Lightweight, accessible smooth scroll library.

• Locomotive Scroll (⭐8.9k) - Detection of elements in viewport and smooth scrolling with parallax.

• Rellax (⭐7.1k) - Lightweight vanilla JavaScript parallax library.

• ScrollOut (⭐1.2k) - Scroll effects for reveal, parallax, and CSS variables.

• Atropos (⭐3.6k) - Touch-friendly 3D parallax hover effects.

Text

• Splitting (⭐1.8k) - Microlibrary to split text into words and characters for CSS animation.

• TypeIt (⭐3.2k) - The most versatile JavaScript typewriter effect library.

• TypewriterJS (⭐2.7k) - Native JavaScript plugin for typewriter text effects.

• NumberFlow (⭐7.7k) - Animated number component for React, Vue, Svelte, and vanilla JS.

React

• Lottie React (⭐968) - React component for rendering Lottie animations.

• Rive React (⭐1.2k) - React runtime for interactive Rive animations.

• React Flip Toolkit (⭐4.2k) - Lightweight magic-move library for configurable layout transitions.

• Remotion (⭐60k) - Create videos programmatically with React.

• React Three Fiber (⭐32k) - A React renderer for Three.js.

• React Transition Group (⭐10k) - Perform animations when a React component enters or leaves the DOM.

GUI tools

• Rive - Real-time interactive animation tool for websites, apps, and games. Design vector graphics and state machines in the editor, then ship them with open-source runtimes for the web.

• LottieFiles - Platform for creating, editing, and shipping Lottie and dotLottie animations. Browse a huge motion library or use Lottie Creator in the browser.

• SVGator - Browser-based SVG animation tool with a visual timeline. Animate stroke, fill, morph, and motion along a path, then export CSS, JavaScript, or Lottie.

• Spline - Real-time 3D design tool that runs in the browser. Build interactive 3D scenes and export them to websites with the Spline runtime.

• Cables - Visual programming tool for interactive WebGL content. Connect operators into patches and export real-time visuals to your website.

• Easings.net - Visual cheat sheet of easing functions. Compare curves, preview motion, and copy CSS or JavaScript snippets.

Videos / Foundation HTML5 Animation with JavaScript

• GSAP Learning - Official GreenSock channel with GSAP tutorials, scroll demos, and plugin walkthroughs.

• Hyperplexed - Creative front-end motion breakdowns: hover effects, text animation, and award-style interactions.

• The Coding Train - Daniel Shiffman teaches creative coding, canvas animation, and p5.js in an approachable format.

• Kevin Powell - Practical CSS animation, transitions, and modern layout techniques.

Sep 16, 2021

Common

• Weeee.js (⭐3) - Tiny Javascript tweening engine.

Jan 09, 2021

React

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

Oct 29, 2020

Videos / Foundation HTML5 Animation with JavaScript

• Yuri Artyukh youtube channel - This man creates amazing web animations using various technologies for this, and recording it all in steam format.

Jul 21, 2020

Canvas

• tsParticles (⭐9k) - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.

React

• React tsParticles (⭐9k) - ReactJS wrapper for tsParticles

Jun 21, 2020

Canvas

• Pts.js (⭐5.3k) - Pts is a typescript/javascript library for visualization and creative-coding.

Feb 02, 2020

Animate on scroll

• Laxxx (⭐10k) - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!

React

• Motion (⭐34k) - Open source, production-ready animation and gesture library for React.

• SVGR (⭐11k) - Transform SVGs into React components.

Jan 21, 2020

Common

• ES6-tween (⭐186) - ES6 version of tween.js.

Dec 28, 2019

SVG

• Snap.svg - The JavaScript library for modern SVG graphics.

• Svg.js (⭐12k) - The lightweight library for manipulating and animating SVG.

• Vivus (⭐15k) - Library to make drawing animation on SVG.

• Walkway (⭐4.3k) - An easy way to animate SVG elements.

• Raphael (⭐11k) - JavaScript Vector Library.

• Bonsai (⭐2k) - BonsaiJS is a graphics library and renderer.

Common

• GSAP (⭐29k) - JavaScript animation library.

• TweenJS (⭐3.5k) - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.

• Anime.js (⭐73k) - JavaScript animation engine.

• Mojs (⭐19k) - The motion graphics toolbelt for the web.

• Animo.js (⭐2.1k) - A powerful little tool for managing CSS animations.

• Move.js (⭐4.7k) - CSS3 backed JavaScript animation framework.

• Velocity (⭐17k) - Accelerated JavaScript animation.

• Animateplus (⭐5.9k) - A+ animation module for the modern web.

• Animatic (⭐1.4k) - CSS animations engine.

• Just Animate (⭐269) - Making Animation Simple.

• Haiku Core (⭐766) - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.

• Between.js (⭐706) - Lightweight JavaScript (ES6) tweening engine.

• Progressbar.js (⭐7.9k) - Responsive and slick progress bars.

• Bezier easing (⭐1.8k) - Cubic-bezier implementation for your JavaScript animation easings.

• Glsl easings (⭐469) - Easing functions in GLSL.

CSS

• Animate.css (⭐83k) - A cross-browser library of CSS animations. As easy to use as an easy thing.

• Motion-ui (⭐1.2k) - The powerful Sass library for creating CSS transitions and animations.

• Magic (⭐8.6k) - CSS3 Animations with special effects.

• Css-loaders (⭐7k) - A collection of loading spinners animated with CSS.

• SpinKit (⭐19k) - A collection of loading indicators animated with CSS.

• Bounce.js (⭐6.2k) - Create beautiful CSS3 powered animations in no time.

Canvas

• EaselJS (⭐8.2k) - EaselJS is a library for building high-performance interactive 2D content in HTML5.

• Fabric.js (⭐31k) - JavaScript canvas library with animation support.

• Paper.js (⭐15k) - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.

• Konva (⭐15k) - 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.7k) - A renderer agnostic two-dimensional drawing api for the web with animation support.

• Ocanvas (⭐488) - JavaScript library for object-based canvas drawing.

• Curtainsjs (⭐1.8k) - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.

• Hover-effect (⭐1.9k) - JavaScript library to draw and animate images on hover.

Animate on scroll

• AOS (⭐28k) - Animate on scroll library.

• Wow (⭐9.9k) - Reveal CSS animation as you scroll down a page.

• Scrollreveal (⭐22k) - Animate elements as they scroll into view.

• ScrollMagic (⭐15k) - The JavaScript library for magical scroll interactions.

• Motus (⭐623) - Animation library that mimics CSS keyframes when scrolling.

• Sal (⭐3.7k) - Performance focused, lightweight scroll animation library.

Text

• Malarkey (⭐237) - Simulate a typewriter effect in vanilla JavaScript.

• Typed.js (⭐16k) - A JavaScript Typing Animation Library.

• Shuffle-text (⭐136) - Shuffle-text is JavaScript text effect library such as cool legacy of Flash.

• Typebot (⭐18) - JavaScript library for typing animation.

• Blotter (⭐3.1k) - A JavaScript API for drawing unconventional text effects on the web.

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.