Blog.bitsrc. IO /11-javascri…

When I look for a clean Javascript animation library on the web, I often find “recommended” libraries that lack ongoing maintenance.

After some research, I’ve collected 11 of the best libraries you can use in your own projects. I’ve also added some libraries that are useful but lack ongoing maintenance.

Tip: Use bits to share your components, use them to build multiple projects and synchronize changes with your team. Don’t duplicate the wheel.

Here are some React spinners:

Each of the above components can be found and tested on the site and can be used directly in your own projects.

Using pure CSS

Before delving into these libraries, don’t forget about pure CSS. Why is that? Because it’s standard, improves performance (GPU), and provides good backward and forward compatibility, it’s probably the most efficient way to create dynamic effects.

1. Three.js

Get over 43K star, this popular library is one of the best ways to create 3D animations in a browser using WebGL. By providing < Canvas >, < SVG >, CSS3D, and WebGL renderers, the library enables 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.

Making:Github.com/mrdoob/thre…

2. Anime.js

Over 20K of Star, 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.

Making:Github.com/juliangarni…

3. Mo.js

The library, with 14K star, is a dynamic graphical tool set for the Web with simple declarative apis, cross-device compatibility, and over 1500 unit tests. You can move the graphics you create around the DOME or SVG DOME or create unique mo.js objects. Although the documentation is somewhat lacking, there are plenty of examples, including an introduction to mo.js CSS techniques.

Making:Github.com/legomushroo…

4. Velocity

Codepen. IO /hone/pen/az…

With 15K star, Velocity is a fast Javascript animation engine that has $.animate() with jQuery. Same API. It has color animation, transformations, looping, gradients, SVG support, and scrolling. This is a breakdown of the Velocity high performance engine, and this is an introduction to SVG animation using the library.

Making:Github.com/julianshapi…

5. Popmotion

With 14K star, this library is only 11KB in size. It allows developers to create animations and interactions from actions, which are streams of values that can be started and stopped, and created using CSS, SVG, React, three.js, and any API that accepts numbers as input.

Making:Github.com/Popmotion/p…

6. Vivus

At over 10K star, Vivus is a zero-dependent JavaScript class that lets you make SVG animations that look like they can be drawn. There are many animation templates available, and you can create custom scripts to draw SVG. Take a look at Vivus-Instant for yourself.

Making:Github.com/maxwellito/…

7. GreenSock JS

GSAP is a JavaScript library for creating high-performance, zero-dependency, cross-browser animations that it claims to be used by over 4 million websites. GSAP is flexible and can be used with React, Vue, Angular, and native JS. GSDevtools can help you modify animations built with GSAP.

Making:Github.com/greensock/G…

8. Scroll Reveal

With 15K STAR 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.

Making:Github.com/jlmakes/scr…

9. Hover (CSS)

Well, this is a CSS library. With 20K star, Hover provides CSS3’s powerful Hover effect for links, buttons, logos, SVG and images, and can be used in CSS, Sass and LESS. You can find the effects you want to use in your style sheet and simply copy and paste, or reference the style sheet.

Making:Github.com/IanLunn/Hov…

10. Kute.js

A fully fledged native JavaScript animation engine with basic cross-browser animation capabilities. But it’s all about code quality, flexibility, performance, and size (the core engine is only 17K and the zip package is only 5.5K). Here’s the demo. The library is also extensible, so you can add your own functionality.

Making:Github.com/thednp/kute…

11. Typed.js

The basic function of this 6K Star library is to allow you to create a typing animation at a selected speed. You can also place a

tag on your page that is invisible to the user and reads the content you want to output, making it easy for search engines to grab. This library is very popular and innovative.

Github:github.com/luisviniciu… Also available is iTyped: github.com/luisviniciu…

Useful but poorly maintained

Note that most of these 8 libraries are not maintained, so use them with care.

  • Particles — a lightweight JavaScript library for creating Particles github: github.com/VincentGarr…

  • Loaders.css – delightful, performance-centric pure CSS loading animations. Github:github.com/ConnorAther…

  • Parallax JS — Parallax engine that responds to the direction of a smart device Github: github.com/wagerfield/…

  • Bounce. Js – Quickly create beautiful CSS3 animations. Github.com:github.com/tictail/bou…

  • Github: github.com/chinchang/c…

  • Html5tooltipsjs – Smooth 3D animation prompt effects github.com: github.com/ytiurin/htm…

  • Pace JS – Automatically adds a progress bar to your site. Github:github.com/HubSpot/pac…

  • Anijs – a library that enhances web design without coding. github:github.com/anijs/anijs

Welcome to pay attention to Beijing cheng Yideng public number: Beijing Cheng Yideng, get more front-end dry goods.