By Jonathan Saring

Translator: Front-end wisdom

Source: medium

The more you know, the more you don’t know

Like it and see. Make it a habit


GitHub: github.com/qq449245884… Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In order to ensure readability, this paper adopts free translation rather than literal translation.

1.Three.js

With over 46K stars, this popular library offers a great deal of 3D display functionality in an intuitive way using WebGL. This library provides the < Canvas >, < SVG >, CSS3D and WebGL renderers that allow us to create rich interactive experiences between devices and browsers. The library was first launched in April 2010 and is still being developed by nearly 1,000 contributors.

2. Anime.js

With more than 20K stars, Anime is a JS animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties as well as JS objects. This library allows us to link multiple animation properties, synchronize multiple instances, create timelines, and more.

3.Mo.js

Over 14K stars, is a dynamic graphical toolbelt for the Web, with a simple declaration API, cross-device compatibility and over 1500 unit tests. We 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.

4. Velocity

Over 15K stars,Velocity is a fast JS animation engine with the same API as jQuery’s $.animate(). It has color animations, transitions, loops, easels, SVG support, and scrolling. Here’s a breakdown of Velocity’s high-performance engine, and here’s an introduction to SVG animation using the library.

5. Popmotion

With over 14K stars, this animation library is only 11 KB in size. It allows developers to create animations and interactions from actions that can be started and stopped, created using CSS, SVG, React, three, JS, and any API that accepts numbers as input.

6. Vivus

Over 10K stars, Vivus is a zero-dependent JS class that lets you animate SVG to give them the appearance of being drawn. We can use one of the many animations available, or create custom scripts to draw SVG. Check out VivUS-Instant for a practical example and get your hands on it.

7. GreenSock JS

GSAP is a JS library for creating high-performance, zero-dependency, cross-browser animations claimed to be used on over 4 million websites. GSAP is flexible and works with React, Vue, Angular, and Vanilla JS. GSDevtools can also help build Dubug animations using GSAP.

8. Scroll Reveal

With 15K stars and zero dependencies, this library provides simple scrolling animations for Web and mobile browsers that animate scrolling content. It supports a variety of compact effect types and even allows you to define animations in natural language. Here’s a short SitePoint tutorial.

9. Hover (CSS)

Over 20K stars, Hover provides a cSS3-supported collection of Hover effects that can be applied to links, buttons, logos, SVG, featured images, and more, available in CSS, Sass, and LESS. You can copy and paste effects that you want to use in your own stylesheets, or reference styles.

10. Kute.js

A fully fledged native JS animation engine with the basic functions of cross-browser animation. The emphasis 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 functionality.

11. 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 pages and read from them to allow search engines and users with JS disabled access. Used by Slack and others, this library is both popular and very useful.

The possible bugs in editing can not be known in real time. In order to solve these bugs after the event, I spent a lot of time on log debugging. By the way, I recommend a good bug monitoring tool for youFundebug.

Original text: blog. Bitsrc. IO / 11 – javascri…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.