Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

awesome-web-animation

A list of awesome web animation libraries, books, apps etc.
https://github.com/sergey-pimenov/awesome-web-animation

Last synced: 1 day ago
JSON representation

  • GUI tools

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

  • React

    • React tsParticles - ReactJS wrapper for *tsParticles*
    • SVGR - Transform SVGs into React components.
    • React spring - Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
    • Motion - Open source, production-ready animation and gesture library for React.

  • Common

    • Animateplus - A+ animation module for the modern web.
    • Mojs - The motion graphics toolbelt for the web.
    • GSAP - JavaScript animation library.
    • Anime.js - JavaScript animation engine.
    • Velocity - Accelerated JavaScript animation.
    • TweenJS - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
    • Progressbar.js - Responsive and slick progress bars.
    • Move.js - CSS3 backed JavaScript animation framework.
    • Between.js - Lightweight JavaScript (ES6) tweening engine.
    • Bezier easing - Cubic-bezier implementation for your JavaScript animation easings.
    • Just Animate - Making Animation Simple.
    • Animatic - CSS animations engine.
    • Animo.js - A powerful little tool for managing CSS animations.
    • Haiku Core - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
    • Glsl easings - Easing functions in GLSL.
    • ES6-tween - ES6 version of tween.js.
    • Weeee.js - Tiny Javascript tweening engine.

  • SVG

    • Vivus - Library to make drawing animation on SVG.
    • Snap.svg - The JavaScript library for modern SVG graphics.
    • Svg.js - The lightweight library for manipulating and animating SVG.
    • Raphael - JavaScript Vector Library.
    • Walkway - An easy way to animate SVG elements.
    • Bonsai - BonsaiJS is a graphics library and renderer.

  • Animate on scroll

    • Sal - Performance focused, lightweight scroll animation library.
    • ScrollMagic - The JavaScript library for magical scroll interactions.
    • AOS - Animate on scroll library.
    • Wow - Reveal CSS animation as you scroll down a page.
    • Motus - Animation library that mimics CSS keyframes when scrolling.
    • Laxxx - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
    • Scrollreveal - Animate elements as they scroll into view.

  • CSS

    • SpinKit - A collection of loading indicators animated with CSS.
    • Bounce.js - Create beautiful CSS3 powered animations in no time.
    • Css-loaders - A collection of loading spinners animated with CSS.
    • Motion-ui - The powerful Sass library for creating CSS transitions and animations.
    • Magic - CSS3 Animations with special effects.

  • Canvas

    • Fabric.js - JavaScript canvas library with animation support.
    • Pts.js - Pts is a typescript/javascript library for visualization and creative-coding.
    • Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
    • Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
    • EaselJS - EaselJS is a library for building high-performance interactive 2D content in HTML5.
    • Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.
    • Hover-effect - JavaScript library to draw and animate images on hover.
    • Ocanvas - JavaScript library for object-based canvas drawing.
    • Curtainsjs - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
    • tsParticles - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.

  • Text

    • Blotter - A JavaScript API for drawing unconventional text effects on the web.
    • Typed.js - A JavaScript Typing Animation Library.
    • Shuffle-text - Shuffle-text is JavaScript text effect library such as cool legacy of Flash.
    • Malarkey - Simulate a typewriter effect in vanilla JavaScript.
    • Typebot - JavaScript library for typing animation.
Programming Languages
JavaScript 33 TypeScript 6 CSS 4 HTML 3 SCSS 2 CoffeeScript 1
Categories
Common 17 Canvas 10 GUI tools 9 Animate on scroll 7 SVG 6 CSS 5 Text 5 React 4
Sub Categories
Keywords
animation 16 javascript 14 svg 9 css 5 canvas 5 design 4 typescript 4 html5 3 graphics 3 javascript-library 3 es6 3 webgl 3 svg-animations 2 creative-coding 2 webpack 2 shape 2 dom 2 scroll 2 timeline 2 glsl 2 web 2 motion 2 snap 1 gsap 1 anime 1 art 1 generative 1 generative-art 1 graphic-design 1 linear-algebra 1 pts 1 sound 1 vector 1 inline-svg 1 loader 1 react 1 react-native 1 react-svg 1 react-svg-creator 1 react-svg-loader 1 svg-react 1 svg-to-react 1 svg2react 1 svgo 1 webpack-loader 1 burst 1 library 1 mo-js 1 modern 1 mojs 1