3. Crazy geek


The original:
https://blog.bitsrc.io/11-jav…

When I look for a clean JavaScript library on the web, I always find a lot of “recommended” libraries that lack constant maintenance.

After some research, I’ve collected 11 of the best libraries you can use in your own projects. I also added some libraries that are useful but lack constant 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 is standard, GPU enhanced, and provides good backward and forward compatibility, it is probably the most efficient way to create dynamic effects.

1. Three.js

Get over 43K STAR, a popular library that is one of the best ways to create 3D animations in a browser, using WebGL. The library allows us to create rich interactive experiences across devices and browsers by providing < Canvas >, < SVG >, CSS3D, and WebGL renderers. The library, which was first launched in April 2010, is still being developed by nearly 1,000 participants.

Making:https://github.com/mrdoob/thr…

2. Anime.js

Over 20K Star, Anime is a JavaScript animation library that can handle CSS properties, individual CSS transformations, SVG or any DOM properties, and JavaScript objects. This library allows you to link multiple animation properties, synchronize multiple instances, create timelines, and more.

Making:https://github.com/juliangarn…

3. Mo.js

The library is a 14K STAR, a dynamic graphics toolset for the Web, with a simple declarative API, cross-device compatibility, and over 1500 unit tests. You can move the shapes you create around the Dome or SVG Dome or create unique mo.js objects. Although the documentation is somewhat lacking, the examples are abundant, and here is an introduction to the CSS techniques of mo.js.

Making:https://github.com/legomushro…

4. Velocity

Codepen demonstration: https://codepen.io/hone/pen/a…

With 15K Star, Velocity is a fast JavaScript animation engine that has $.animate() with jQuery. Same API. It has color animation, transform, loop, gradient, 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:https://github.com/julianshap…

5. Popmotion

With 14K STAR available, 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:https://github.com/Popmotion/…

6. Vivus

At more than 10K STAR, Vivus is a zero-dependent JavaScript class that lets you make SVG animations and give them a look that can be drawn. There are a number of animation templates available, as well as creating custom scripts to draw SVG. Take a look at Vivus-Instant for yourself.

Making:https://github.com/maxwellito…

7. GreenSock JS

GSAP is a JavaScript library for creating high-performance, zero-dependency, cross-browser animations that it claims are used by more than 4 million Web sites. GSAP is flexible and works with React, Vue, Angular, and native JS. Gsdevtools can help you modify animations built with GSAP.

Making:https://github.com/greensock/…

8. Scroll Reveal

With its 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 simple effects and even lets you define animations using natural language. This is a short SitePoint tutorial.

Making:https://github.com/jlmakes/sc…

9. Hover (CSS)

Well, this is a CSS library. Get 20K STAR, Hover provides the powerful Hover effect of CSS3, can be used for links, buttons, logos, SVG and images, can be used in CSS, SASS and LESS. You can find the effect you want to use in your own stylesheet and simply copy and paste it, or refer to the stylesheet.

Making:https://github.com/IanLunn/Hover

10. Kute.js

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

Making:https://github.com/thednp/kut…

11. Typed.js

The basic function of this library with 6K Star is that it allows you to create a typing animation at a selected speed. You can also place an invisible

tag on the page and read your output from it, making it easy for search engines to crawl. This library is very popular and full of novelty.

github:https://github.com/luisvinici… In addition to iTyped:https://github.com/luisvinici…

Useful but lacking in maintenance

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

  • Particles – lightweight JavaScript library for creating particle github:https://github.com/VincentGar…
  • Loaders.css – Pleasant, performance-focused, pure CSS loading animations. github:https://github.com/ConnorAthe…
  • Parallax JS – react to the direction of the intelligent device of Parallax engine github:https://github.com/wagerfield…
  • Bounce. Js – Quickly create beautiful CSS3 animations. github.com:https://github.com/tictail/bo…
  • Effect of CTA JS – make your “action” path move github:https://github.com/chinchang/…
  • Html5tooltipsjs – smooth effect of 3 d animation tip github.com:https://github.com/ytiurin/ht…
  • Pace JS – Automatically adds progress bars to your website. github:https://github.com/HubSpot/pace
  • Anijs – A library that improves web design without coding. github:https://github.com/anijs/anijs

The first send WeChat messages public number: Jingchengyideng

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

  • 12 Amazing CSS Experiment Projects
  • What are the front-end interview questions at the world’s top companies
  • CSS Flexbox Visualization Manual
  • The holidays are boring? Write a little brain game in JavaScript!
  • React from a designer’s point of view
  • How does CSS sticky positioning work
  • A step-by-step guide to implementing animations using HTML5 SVG
  • Programmer 30 years old before the monthly salary is less than 30K, which way to go
  • 7 open front end questions
  • React Tutorial: A Quick Start Guide