When I was looking for a good and clean Javascript animation library on the Internet, I found some animation libraries recommended by many developers. After my research, I collected 11 best animation libraries for your use and learning, and can also be applied to your program.
1、Three.js
Address: https://github.com/mrdoob/three.js/
With over 46K stars on github, this popular animation library provides a lot of 3D display functions and uses WebGL in an intuitive way. This library provides <canvas>, <svg>, CSS3D and WebGL renderers, let us create a rich interactive experience between the device and the browser. The library was first launched in April 2010, and there are still nearly 1,000 contributors in development.
2. Anime.js
Address: https://github.com/juliangarnier/anime
Over 20Kstars, Anime is a JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties, and JavaScript objects. This library allows you to link multiple animation properties, synchronize multiple instances, create timelines, etc.
3.Mo.js
Address: https://github.com/legomushroom/mojs
Over 14K stars, it is a dynamic graphics tool belt for the Web, with a simple declaration API, cross-device compatibility and more than 1500 unit tests. You can move things around DOME or SVG DOME or create unique mo.js objects. Although the documentation is somewhat scarce, the examples are very rich, and here is an introduction to CSS techniques.
4. Velocity
Address: https://github.com/julianshapiro/velocity
Over 15k stars, Velocity is a fast Javascript animation engine with the same API as jQuery's $ .animate (). It has color animation, conversion, looping, easel, SVG support and scrolling. Here is a breakdown of Velocity's high-performance engine, and here is an introduction to SVG animation using the library.
5. Popmotion
Address: https://github.com/popmotion/popmotion
Over 14K stars, the size of this animation library is only 11 kb. It allows developers to create animations and interactions from actions that can be started and stopped, can be created using CSS, SVG, React, three, js, and any API that accepts numbers as input.
6. Vivus
Address: https://github.com/maxwellito/vivus
Over 10k stars, Vivus is a zero-dependency JavaScript class that allows you to animate SVGs so that they have the appearance of being drawn. You can use one of the many available animations, or create a custom script to draw SVG. Check out Vivus-instant for practical examples and get hands-on practice.
7. GreenSock JS
Address: https://github.com/greensock/GreenSock-JS
GSAP is a JavaScript library for creating high-performance, zero-dependency, cross-browser animations, and is said to be used on more than 4 million websites. GSAP is flexible and can work with React, Vue, Angular, and vanilla JS. GSDevtools can also help build dubug animations using GSAP.
8. Scroll Reveal
Address: https://github.com/jlmakes/scrollreveal
With 15Kstars and zero dependencies, this library provides simple scrolling animations for web and mobile browsers, displaying the scrolling content in an animated manner. It supports multiple concise effect types and even allows you to define animations in natural language. Here is a brief SitePoint tutorial (address: https://www.sitepoint.com/revealing-elements-scrollreveal-js/).
9. Hover (CSS)
Address: https://github.com/IanLunn/Hover
I am a front-end engineer who has been working for five years. I have compiled a most comprehensive front-end learning material.
From the most basic HTML + CSS + JS to HTML5 project practical learning materials are organized and sent to every front-end partner. For those who want to learn the web front-end, or change careers, or university students, and those who want to improve their abilities at work, they are learning partners. They need to be able to chat with me privately. This is my front-end development qun, [六 零Three] [Nine Eight Five] [Nine Nine Three], download it directly, you can ask me any questions (learning methods, learning efficiency, how to find employment) for learning the web front end
Over 20k stars, Hover provides a collection of hover effects supported by CSS3, which can be applied to links, buttons, logos, SVG, featured images, etc., and is available in CSS, Sass, and LESS. You can copy and paste the effects you want to use in your own style sheet, or quote styles.
10. Kute.js
Address: https://github.com/thednp/kute.js/
A fully mature native JavaScript animation engine with basic functions for cross-browser animation. The focus is on code quality, flexibility, performance and size (core engine 17k and gzipped 5.5k)-this is a demo. The library is also extensible, so you can add your own functions.
11. Typed.js
Address: https://github.com/mattboldt/typed.js
Over 7k stars, this library allows you to create typing animations for strings at a selected speed. You can also place HTML divs on the page and read from them to allow access by search engines and users with JavaScript disabled. Used by Slack and others, this library is both popular and very useful.
