While browsing the web looking for a clean Javascript animation library, I found that many “recommended” animation libraries are not maintained for a while.
After some research, I’ve collected 11 of the best libraries to use in your application. I’ve also added a few, mostly non-maintenance, useful libraries.
When working with UI components, you can also use Bit to easily share those components between different applications, rather than copying and pasting them, making changes from different projects, and collaborating with other projects.
Bit – Sharing and Building with Code Components _Bit helps you share, discover and use code components across projects and applications to build new features and… _bitsrc.io
Using pure CSS
Before delving into these libraries, don’t forget to use pure CSS. Why is that? Because it’s standard, it improves performance (GPU), provides both backward and forward compatibility, and it’s probably the most efficient way to create animations. Here are 10 examples of pure, pure CSS animations.
Pure CSS Saturn hula hoops
1. Three.js
With over 43K stars, this popular library is a great way to create 3D animations in a browser using WebGL. Providing < Canvas >, < SVG >, CSS3D and WebGL renderers, this library allows us to create rich interactive experiences across devices and browsers. The library was first launched in April 2010 and is still being developed by nearly 1,000 participants.
Mrdoob /three.js _three.js — JavaScript 3D library._github.com
2. Anime.js
With over 20K stars, Anime is a JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties as well as JavaScript objects. This library allows you to link multiple animation properties, synchronize multiple instances, create timelines, and more.
Juliangarnier/Anime _Anime — JavaScript Animation Engine_github.com
3. Mo.js
The library is 14K star, a dynamic graphical toolbelt for the Web with a simple declaration API, cross-device compatibility and over 1500 unit tests. You can move things around the DOME or SVG DOME or create unique mo.js objects. Documentation is scarce, but examples are plentiful, and here are some CSS tips.
Legomushroom/MOJS _MOjs — Motion Graphics Toolbelt for the web_github.com
4. Velocity
At 15Kstars, Velocity is a fast Javascript animation engine with the same API as jQuery’s $.animate (). It has color animation, transformation, looping, easing, SVG support and scrolling. This is a breakdown of the Velocity high performance engine, and here is an introduction to SVG animation using the library.
Juliansshapiro/Velocity _Velocity — Accelerated JavaScript animation._github.com
5. Popmotion
At 14Kstars, this library of functional and reactive animations weighs only 11KB. It allows developers to create animations and interactions from actions that can be started and stopped, and created using CSS, SVG, React, three.js and any API that accepts numbers as input.
Popmotion/ Popmotion _POPmotion — A functional, Reactive animation library._github.com
6. Vivus
At over 10K stars, Vivus is a zero-dependent JavaScript class that lets you animate SVG to give them the appearance of being drawn. You can use one of the many animations available, or create custom scripts to draw SVG. Check out VivUS-Instant for live examples and get your hands on them.
Maxwellito /vivus _vivus — JavaScript Library to make drawing animation on SVG_github.com
7. GreenSock JS
GSAP is a JavaScript library for creating high-performance, zero-dependency, cross-browser animations claimed to be used on over 4 million websites. GSAP is flexible and can be used with React, Vue, Angular, and Vanilla JS. GSDevtools can also help improve animations built using GSAP.
Greensock/greensock -js _GreenSock -js — Greensock’s GSAP JavaScript Animation Library (including Draggable)._github.com
8. Scroll Reveal
With 15K stars and zero dependencies, the library provides simple scrolling animations for Web and mobile browsers that animate scrolling content. It supports a variety of concise effects and even lets you define animations in natural language. This is a short SitePoint tutorial.
Jlmakes/scrollREVEAL _SCrollreveal — Easy Scroll animations for Web and Mobile browsers._github.com
9. Hover (CSS)
Well, this is a CSS library. At 20K stars, Hover offers a collection of CSS3 power Hover effects that can be applied to links, buttons, logos, SVG, featured images, and more, and can be used in CSS, Sass, and LESS. You can copy and paste effects or reference stylesheets that you want to use in your own stylesheets.
IanLunn/Hover _Hover — A collection of CSS3 powered Hover effects to be applied to links, buttons, logos, SVG, Featured images and so… _github.com
10. Kute.js
A fully fledged native JavaScript animation engine with basic cross-browser animation capabilities. The emphasis is on code quality, flexibility, performance and size (the core engine is 17K min and 5.5K gzipped) – this is a demo. The library is also extensible, so you can add your own functionality.
Thednp /kute.js _kute.js — Kute.js is a native Javascript animation engine featuring Great Code Quality, featuring great Code Quality. Badass performance, SVG… _github.com
11. Typed.js
T This 6K star library basically allows you to create typing animations for strings at the speed you choose. You can also place HTML divs on the page and read from them to allow search engines and users with JavaScript disabled access. Used by Slack and others, this library is both popular and surprisingly useful.
Mattboldt /typed. Js _typed. Js — A JavaScript Typing Animation Library_github.com
- Also check out: iTyped
Delayed supplement: Airbnb’sLottie
Lottie is a mobile library for the Web that iOS uses to parse Adobe After Effects animations exported as JSON using Bodymovin and render them natively.
Airbnb /lottie-web _Lottie-web – Render After Effects animations natively on Web, Android and iOS, and React Native… _github.com