20 Free Open Source JavaScript Animation Frameworks and Libraries

20 Free Open Source JavaScript Animation Frameworks and Libraries
Photo by Hans Eiskonen / Unsplash

JS Animation libraries help developers create catchy animations for their websites, web apps, or even games. In this post we offer you the best multipurpose and specific JavaScript animation libraries and frameworks.

1- Motus

Motus is a simple dependency-free JavaScript animation library that allows developers to simulate CSS keyframe animations. It features a built-in Node and Browser support, and offers a scroll hooks for both vertical and vertical scrolling.

GitHub - alexcambose/motus: Animation library that mimics CSS keyframes when scrolling.
Animation library that mimics CSS keyframes when scrolling. - GitHub - alexcambose/motus: Animation library that mimics CSS keyframes when scrolling.

2- Mojs

Mojs is a free open source motion animation library that comes with dozens of useful open source tools as a motion player (Mojs player), curve and timeline motion editor.

mo · js
The motion graphics toolbelt for the web. mo · js has 7 repositories available. Follow their code on GitHub.

3- Josh.js

Josh.js is a simple agnostic JavaScript library that allows developers to animate any content on the screen. It uses Animate.css in the background, as it allows you to create your own animation or use any other CSS animation library.

Josh.js supports ES6 and offers a compiled version for ES5.

GitHub - mamunhpath/josh.js: A JavaScript library to animate content on page scroll.
A JavaScript library to animate content on page scroll. - GitHub - mamunhpath/josh.js: A JavaScript library to animate content on page scroll.

4- Babylon

Babylon.js is an animation and game engine that is written primarily in JavaScript, it offers a built-in WebGPU support, and works on desktop and mobile browsers.

Babylon has a vast community of developers who keep its official curve editor updated and maintained.

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
Babylon.js is one of the world’s leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and open 3D to everyone on the web.

5- Starback.js

Starback.js allows you to create a fancy beautiful star animation or snow falling effects for your webpage.

GitHub - zuramai/starback.js: Create a beautiful star falling background with starback.js
Create a beautiful star falling background with starback.js - GitHub - zuramai/starback.js: Create a beautiful star falling background with starback.js

6- Vivus

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

vivus.js - svg animation
SVG Drawing Animation

7- GreenSock

GreenSock is an advanced super rich JavaScript animation library that allows developers to create complex animations with little effort. It offers developers to create smooth SVG animation using DrawSVGPlugin, MorphSVGPlugin, and MotionPathPlugin.

GreenSock support WebGL by default, and it is the favorite choice for many JavaScript game developers to add effects for their games.

GASP or (GreenSock Animation Platform) is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's ScrollTrigger plugin lets you create jaw-dropping scroll-based animations with minimal code. gsap.matchMedia() makes building responsive, accessibility-friendly animations a breeze.

GreenSock
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

8- Scene.js

🎬 Scene.js is an JavaScript & CSS timeline-based animation library. It comes with many examples that aids you to create complex object animation for any website. The examples include: tree effect, snow falling animation, cube effect, content card rotation, circle burst, and clapperboard animation.

GitHub - daybrush/scenejs: 🎬 Scene.js is JavaScript & CSS timeline-based animation library
🎬 Scene.js is JavaScript & CSS timeline-based animation library - GitHub - daybrush/scenejs: 🎬 Scene.js is JavaScript & CSS timeline-based animation library

9- PowerGlitch

PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.

GitHub - 7PH/powerglitch: Tiny JS library to glitch anything on the web
Tiny JS library to glitch anything on the web. Contribute to 7PH/powerglitch development by creating an account on GitHub.

10- TweenJS

TweenJS is a simple tweening library for use in JavaScript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it (though it uses the same Ticker and Event classes by default). It supports tweening of both numeric object properties & CSS style properties.

GitHub - CreateJS/TweenJS: A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries. - GitHub - CreateJS/TweenJS: A simple but powerful tweening / animation library for Javas…

11-Velocity.js

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easing animation, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Velocity.js
Velocity.js: An incredibly fast animation engine for motion designers.

12- three.js

The three.js library is an amazing 2D/ 3D animation JavaScript library that can be used to build complex rich animation for games, kids educational websites, and fancy presentations.

The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as add-ons.

GitHub - mrdoob/three.js: JavaScript 3D Library.
JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

13- ScrollReveal

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.

GitHub - jlmakes/scrollreveal: Animate elements as they scroll into view.
Animate elements as they scroll into view. Contribute to jlmakes/scrollreveal development by creating an account on GitHub.

14- Animatic

With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects! And it's only 7k when gzipped.

GitHub - lvivski/animatic: CSS animations engine
CSS animations engine. Contribute to lvivski/animatic development by creating an account on GitHub.

15- Typed.js

Typed.js is a library that types. Enter any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set. Here you can view some demos.

GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library
A JavaScript Typing Animation Library. Contribute to mattboldt/typed.js development by creating an account on GitHub.

16- Between.js

Between.js is a free simple Lightweight JavaScript (ES6) tweening library, It works with all modern browsers, and comes with a simple developer-friendly API.

GitHub - sasha240100/between.js: Lightweight JavaScript (ES6) tweening engine
Lightweight JavaScript (ES6) tweening engine. Contribute to sasha240100/between.js development by creating an account on GitHub.

17- Just Animate 2

Just Animate 2 is a feature-rich animation library that supports timeline animation, sequencing, CSS animation and comes with built-in tween engine.

GitHub - just-animate/just-animate: Making Animation Simple
Making Animation Simple. Contribute to just-animate/just-animate development by creating an account on GitHub.

18- Anime.js

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

GitHub - juliangarnier/anime: JavaScript animation engine
JavaScript animation engine. Contribute to juliangarnier/anime development by creating an account on GitHub.

19- Loading animations

If you are looking for a loading JavaScript animation that you can include in your project we recommend this simple library which offers many loading animations with code samples.

GitHub - Skparab1/loading-animations: Some cool loading animations made in Js
Some cool loading animations made in Js. Contribute to Skparab1/loading-animations development by creating an account on GitHub.

20- Progressbar.js

Progressbar.js offers responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish.

ProgressBar.js - Progress bars with JavaScript
With ProgressBar.js, it’s easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create arbitrary shaped progress bars with any vector graphic editor.

Read more