20 Free Open Source JavaScript Animation Frameworks and Libraries

JavaScript 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.

12 Powerful Animation Frameworks for React, React Native, and Next.js

Animations are essential in modern web development to create smooth, dynamic, and engaging user experiences. With React, adding animations can become complex if handled manually. Animation libraries simplify the process by providing easy-to-use APIs, fine-tuned control over animations, and optimized performance, all without overwhelming your codebase. 16 Free React Gallery,

MEDevel.com: Open-source for Healthcare, and EducationHazem Abbas

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.

GitHubalexcambose

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.

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.

GitHubmamunhpath

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.

Babylon.jsNike

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

GitHubzuramai

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

svg 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.

GreenSock

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

GitHubdaybrush

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.

GitHub7PH

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…

GitHubCreateJS

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.

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.

GitHubmrdoob

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.

GitHubjlmakes

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.

GitHublvivski

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.

GitHubmattboldt

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.

GitHubsasha240100

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.

GitHubjust-animate

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.

GitHubjuliangarnier

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.

GitHubSkparab1

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.

Progress bars with JavaScriptKimmo Brunfeldt

10 Open Source CSS Animation Frameworks

What is a CSS animation? CSS animation allowing you to animate HTML elements using only CSS classes. It does not require JavaScript, nor extensive setup or configuration. CSS animations allow you to create fancy eye-catching websites, parallel sliders, control, animated hover effects, 3D effects, entries, and exit animations per element.

MEDevel.com: Open-source for Healthcare, and EducationHazem Abbas

Best 11 React.js Animation Libraries To Add Cool Effects

Are you ready to take your React.js applications to the next level with stunning animations and cool effects? Look no further! In this tutorial, we will delve into the top 11 animation libraries specifically designed for React.js that are guaranteed to enhance your projects. These libraries offer a

MEDevel.com: Open-source for Healthcare, and EducationHazem Abbas