The best sites and mobile apps of today leverage animation not only to improve usability but also to delight and surprise users. Websites without animation are starting to feel antiquated. Whether you want to realistically bounce a ball, gradually expand a drop-down menu, or simply bring attention to an element when users hover over it ,here are 40 Javascript UI Animation Libraries For Web & Mobile that will add life and depth to your web and mobile applications and improve user experience.

Pts

Written in typescript and compiled to javascript ES6, Pts is lightweight and modular. It comes with many useful algorithms for data visualization and creative coding.

Famous Engine

It is a free and open source JavaScript rendering engine. What makes the Famous Engine unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript. It is designed to allow developers the ability to render to both DOM and WebGL in a unified API.

Two.js

It is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Lottie

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000.

mo.js

It is a JavaScript library devoted to motion for the web. It offers a declarative syntax for motion and the creation of elements for animation. Depending on what you’re animating, the shapes and other objects that mo.js allows you to make might simplify your workflow. mo.js offers a declarative syntax that makes it very easy to create something on the fly.

Snap.svg

It is a JavaScript library for working with SVG. Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.

Popmotion

Popmotion makes it effortless to define slick looking complex animations, it becomes easy to take for granted how much complexity under the hood it’s handling for us, instead of spending countless hours fine tuning animations we can now focus on building out animated UI efficiently with concise, maintainable code.

Animejs

It is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

ProgressBar.js

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

Bounce.js

It is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you’d like your application to generate these on the fly, you can use the Bounce.js library.

SVG.js

A lightweight library for manipulating and animating SVG, without any dependencies.

React-native-animatable

Standard set of easy to use animations and declarative transitions for React Native

Ramjet

Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree. It does so by making copies of the two elements (and all their children), setting a fixed position on each, then using CSS transforms to morph the two elements in sync.

Animate Plus

It is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile.

Particles.js

A lightweight JavaScript library for creating particles.

cta.js

cta.js or “Call to Animation” is a light-weight performant library to animate any element (“action”) onto any other element (“effect”) on the page.

ScrollReveal

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

KUTE.js

It is a native JavaScript animation engine featuring great code quality, badass performance, SVG morphing, stroke drawing and 2D & 3D transforms, CSS3 transforms, colors, as well as other CSS3 properties or presentation attributes.

MixItUp 3

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more.

Granim.js

Create fluid and interactive gradient animations with this small javascript library.

Ant Motion

It is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.

Velocity

It 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, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

CAAT

CAAT is a multi-instance director-based scene-graph manager. It is able to render using Canvas, WebGL and CSS with the same code base. Features actors, containers, scene transitions, behaviors, interpolators, paths, custom affine transformation stack, timers, elements lifecycle, etc.

Glorious

The easiest way of creating animations to show your code in action.

Vivus.js

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

GreenSock Animation Platform

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations ‘just work’. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings…animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It’s up to 20x faster than jQuery!

Emergence.js

Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser.

Zeu.js

It is JavaScript library featuring a collection of prebuilt visualization components for building real-time TV dashboard, monitoring UI and IoT web interface.

egjs

It is Javascript components group that brings easiest and fastest way to build a web application in your way.

Origami.js

Initially, it’s a tool for teaching geometry, web, and javascript in schools. Currently, it’s a powerful library to create using HTML5 Canvas.

TypeIt

The most versatile JavaScript animated typing utility on the planet.

between.js

To be honest, there are already tons of tweening engines in Javascript ecosystem, there are great ones, such as Tween.js and GSAP. There are PROS and CONS for both as I’ve loved simplicity & accessibility of Tween.js and performance/smooth of GSAP. However, web is moving forward and libraries need to be upgraded to meet todays conditions.

Bounty

JavaScript odometer or slot machine effect library for smoothly transitioning numbers with motion blur. Library uses functional approach and ES7 Function Bind Syntax. Internally based on SVG.

Splitting

It creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!

Force.js

The easy way to scroll and animate your page.

Highway

Highway is a lightweight, robust, modern and flexible library that will let us create AJAX navigations with beautiful transitions on our websites.

React-burger-menu

An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.

AniJS

It lets you create animated styling for your website without any JavaScript or CSS coding! You can specify all your animations with HTML using a simple If-On-Do-To syntax.

Micron.JS

It is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Swup

Makes creating transitions between website pages ridiculously easy.

Timeliner

Timeliner is a graphical graphical tool to help create and prototype animations quickly. It is useful for adjusting variables and checking out how the effects changes over time with keyframing and easing/tweening functions. It may also have some similarities with the timeline component of adobe flash, after effects, edge animate or other animation software.