Animation is a very important content in a good front-end interface. Using animation in line with the scene can not only optimize the interactive details in the website page, improve user experience, but also make the page more attractive and bring more visits to the website. If you don’t have the ability to write all kinds of commotion pictures by hand, then the following animation library can be collected ~

Three.js

Three, the popular library currently breaking 56K Star, is an easy-to-use, lightweight, 3D library default WebGL renderer. In the example, the library also provides canvas 2D, SVG, and CSS3D renderers. Threejs can be understood as three + js, where three stands for 3D and js stands for javascript. So together, three.js stands for writing 3D programs using javascript. Three. Js is a great open source WebGL library that allows JavaScript to operate on gpus to achieve true 3D on the browser side.

If we need to use Threejs for drawing, we just need to create a minimal drawing environment. Threejs actually calls the CANVAS API in HTML5 to draw. But instead of drawing 2D images, the library provides Canvas, SVG, CSS3D, and WebGL renderers that allow us to create rich interactive experiences between devices and browsers. Threejs encapsulates the elements needed for 3D drawing (scene, camera, lighting, geometry, materials, etc.) at the top level

There are various samples provided by the authorities. Here are two samples randomly selected for demonstration:

Anime.js

The Anime Library currently has 33K Star, Anime is a JavaScript animation library that can be used with CSS properties, single CSS transformations, SVG or any DOM properties and JavaScript objects. The library lets you link multiple animation properties, synchronize multiple instances together, create timelines, and more.

Here’s a look at a few cool examples too

  • Particle bloom effect example

  • Our goal is not only to pursue cool, but also to suit the business scenario, fake snake form submission effects

  • 100 lines of code to achieve canvas mouse click bloom example

Mo.js

Mo.js this library reaches 15K Star, is a motion graphics toolbelt for networking, has a simple declarative API, cross-device compatibility and over 1500 unit tests. You can move content around the DOME or SVG DOME, or create unique mo.js objects. Although documentation is sparse, examples are plentiful, and this is an introduction to CSS techniques. Mo.js has good compatibility:

  • Chrome 4+
  • Firefox 4+
  • Opera 11.5 +
  • Safari 4+
  • IE 9+

Take a chestnut

Velocity

Velocity is a fast Javascript animation engine with the same API as jQuery’s $.animate() and currently has 16K Star. It has color animation, conversion, looping, scaling, SVG support, and scrolling. Since it is basically consistent with the JQ method API, it is simply out of the box for our friends, do not need to be familiar with the new API directly a shuttle ~

popmotion

The functional animation library currently has 17K Star, but the entire package size is only 11KB, a minimal animation library. It allows developers to create animations and interactions based on actions that are streams of values that can be started and stopped, using CSS, SVG, React, three.js, and any API that accepts numbers as input. Popmotion’s official website provides rich and detailed examples, including Vue\React and other examples. The animation library is relatively easy to get started with, and is more than enough to complete basic services.

Typed.js

Typed is a library dedicated to typing animations, currently with 9K Star. Lets you create typing animations for strings at a selected speed. You can also place an HTML div on the page and read it to allow search engines and users with JavaScript disabled access. It’s both popular and surprisingly useful. Here is a simple example

Animate(css)

Animate. CSS is a collection of animation effects created using CSS3 animation. At present has 63K Star, is one of the front-end friends essential front-end CSS animation library, all the dynamic effect of instant preview, use, very convenient.

Hover (css)

Hover is a library dedicated to providing CSS Hover effects, currently available in 22K Star, Hover provides a collection of CSS3 supported Hover effects, can be applied to links, buttons, logos, SVG, featured images and more, can be used for CSS, Sass and less. You can copy and paste the effects you want to use in your own stylesheets, or reference the stylesheets directly.

At the end, these are some libraries with high Star and high frequency of use that are usually developed and sorted in spare time. This paper is just a simple introduction. These libraries are basically equipped with perfect docs and demos, and you need to explore the subsequent use together. If you have a better library, feel free to leave a comment and the next wave will have a chance to sort it out for you.

Library is good, but do not drink oh, should try handwriting or write oh ~

❤️ If you find this article inspiring:

Share this article so that more people can see it (please like it and follow 😊)

Follow the public account “Qianduangongxiami” and share the front-end dry goods every week