Snap.svg
The JavaScript library for modern SVG graphics.
In 2 lists
The JavaScript library for modern SVG graphics.
Awesome Web Animation
A list of awesome web animation libraries, books, apps etc.
This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.
SVG
Svg.js
The lightweight library for manipulating and animating SVG.
In 2 lists
Vivus
Library to make drawing animation on SVG.
In 3 lists
Walkway
An easy way to animate SVG elements.
Raphael
JavaScript Vector Library.
In 3 lists
Bonsai
BonsaiJS is a graphics library and renderer.
In 2 lists
Lazy Line Painter
A modern JavaScript library for SVG path animation.
Flubber
Tools for smoother SVG shape morphing and interpolation.
Lottie
Render After Effects animations natively on the web as SVG or Canvas.
In 2 lists
Common
GSAP
JavaScript animation library.
In 3 lists
TweenJS
A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
In 3 lists
Anime.js
JavaScript animation engine.
In 3 lists
Mojs
The motion graphics toolbelt for the web.
In 3 lists
Animo.js
A powerful little tool for managing CSS animations.
Animateplus
A+ animation module for the modern web.
In 3 lists
Animatic
CSS animations engine.
Just Animate
Making Animation Simple.
Haiku Core
Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
Between.js
Lightweight JavaScript (ES6) tweening engine.
Progressbar.js
Responsive and slick progress bars.
In 4 listsDetails
Bezier easing
Cubic-bezier implementation for your JavaScript animation easings.
Glsl easings
Easing functions in GLSL.
ES6-tween
ES6 version of tween.js.
Weeee.js
Tiny Javascript tweening engine.
Theatre.js
Motion design editor for the web.
In 2 lists
Popmotion
Simple animation libraries for delightful user interfaces.
In 2 lists
AutoAnimate
Zero-config, drop-in animation utility for smooth DOM transitions.
In 3 lists
KUTE.js
JavaScript animation engine for modern browsers.
Rive
Web runtime for interactive Rive animations.
CSS
Animate.css
A cross-browser library of CSS animations. As easy to use as an easy thing.
In 3 lists
Motion-ui
The powerful Sass library for creating CSS transitions and animations.
Magic
CSS3 Animations with special effects.
In 2 lists
Css-loaders
A collection of loading spinners animated with CSS.
In 3 lists
SpinKit
A collection of loading indicators animated with CSS.
In 3 lists
Bounce.js
Create beautiful CSS3 powered animations in no time.
In 3 lists
AnimXYZ
Composable CSS animation toolkit powered by CSS variables.
Hover.css
A collection of CSS3 powered hover effects.
In 3 lists
CSShake
CSS classes to shake your DOM.
In 2 lists
Whirl
CSS loading animations with minimal effort.
In 2 lists
CSS Doodle
A web component for drawing patterns with CSS.
In 2 lists
Canvas
EaselJS
EaselJS is a library for building high-performance interactive 2D content in HTML5.
In 6 listsDetails
Fabric.js
JavaScript canvas library with animation support.
In 3 lists
Paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
In 6 listsDetails
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
In 3 lists
Two.js
A renderer agnostic two-dimensional drawing api for the web with animation support.
In 4 listsDetails
Ocanvas
JavaScript library for object-based canvas drawing.
Curtainsjs
Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
Hover-effect
JavaScript library to draw and animate images on hover.
Pts.js
Pts is a typescript/javascript library for visualization and creative-coding.
In 3 lists
tsParticles
tsParticles is a lightweight typescript/javascript library for creating easily particles animations.
In 7 listsDetails
Zdog
Round, flat, designer-friendly pseudo-3D engine for canvas and SVG.
In 4 lists
canvas-confetti
Performant confetti animation in the browser.
In 4 lists
Vanta.js
Animated 3D backgrounds for your website.
Animate on scroll
AOS
Animate on scroll library.
In 2 lists
Laxxx
Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
Wow
Reveal CSS animation as you scroll down a page.
In 2 lists
Scrollreveal
Animate elements as they scroll into view.
ScrollMagic
The JavaScript library for magical scroll interactions.
In 4 lists
Motus
Animation library that mimics CSS keyframes when scrolling.
Sal
Performance focused, lightweight scroll animation library.
Lenis
Lightweight, accessible smooth scroll library.
Locomotive Scroll
Detection of elements in viewport and smooth scrolling with parallax.
In 3 lists
Rellax
Lightweight vanilla JavaScript parallax library.
In 2 lists
ScrollOut
Scroll effects for reveal, parallax, and CSS variables.
Atropos
Touch-friendly 3D parallax hover effects.
In 2 lists
Text
Malarkey
Simulate a typewriter effect in vanilla JavaScript.
In 2 lists
Typed.js
A JavaScript Typing Animation Library.
In 3 lists
Shuffle-text
Shuffle-text is JavaScript text effect library such as cool legacy of Flash.
In 2 lists
Typebot
JavaScript library for typing animation.
Blotter
A JavaScript API for drawing unconventional text effects on the web.
In 2 lists
Splitting
Microlibrary to split text into words and characters for CSS animation.
TypeIt
The most versatile JavaScript typewriter effect library.
In 2 lists
TypewriterJS
Native JavaScript plugin for typewriter text effects.
In 2 lists
NumberFlow
Animated number component for React, Vue, Svelte, and vanilla JS.
In 3 lists
React
Motion
Open source, production-ready animation and gesture library for React.
In 3 lists
SVGR
Transform SVGs into React components.
tsParticles
tsParticles is a lightweight typescript/javascript library for creating easily particles animations.
In 7 listsDetails
React spring
Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
Lottie React
React component for rendering Lottie animations.
Rive React
React runtime for interactive Rive animations.
React Flip Toolkit
Lightweight magic-move library for configurable layout transitions.
In 2 lists
Remotion
Create videos programmatically with React.
In 4 lists
React Three Fiber
A React renderer for Three.js.
In 6 listsDetails
React Transition Group
Perform animations when a React component enters or leaves the DOM.
In 2 lists
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.
In 2 lists
Mantra
Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects.
In 2 lists
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…
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…
Cubic Bezier
A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.
In 2 lists
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.
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.
In 2 lists
LottieFiles
Platform for creating, editing, and shipping Lottie and dotLottie animations. Browse a huge motion library or use Lottie Creator in the browser.
In 3 lists
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.
In 2 lists
Spline
Real-time 3D design tool that runs in the browser. Build interactive 3D scenes and export them to websites with the Spline runtime.
In 5 listsDetails
Cables
Visual programming tool for interactive WebGL content. Connect operators into patches and export real-time visuals to your website.
In 2 lists
Easings.net
Visual cheat sheet of easing functions. Compare curves, preview motion, and copy CSS or JavaScript snippets.
In 3 lists
Videos
Yuri Artyukh youtube channel
This man creates amazing web animations using various technologies for this, and recording it all in steam format.
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.
Related lists in Front-End Development
See category93
Awesome Vue
vuejs/awesome-vue
🎉 A curated list of awesome things related to Vue.js
93
Awesome DESIGN.md
VoltAgent/awesome-design-md
A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
91
Awesome Angular
PatrickJS/awesome-angular
:page_facing_up: A curated list of awesome Angular resources
90
Awesome Blazor
AdrienTorris/awesome-blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
88
Must-Watch CSS
AllThingsSmitty/must-watch-css
CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺
87
Awesome React Native
jondot/awesome-react-native
Awesome React Native components, news, tools, and learning material!