Shulou(Shulou.com)06/01 Report--

This article will explain in detail what are the JavaScript animation libraries that are easy to use. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

Animate.css

Animate.css is a CSS collection of animation effects produced using CSS3 animation, which preset many commonly used animations, and it is very simple to use.

GitHub：https://github.com/animate-css/animate.css

Hover.css

Hover.css is a CSS3-based hover effect and animation that can be easily applied to buttons, logos, and images. All of these effects require only a single label, using before and after pseudo-elements when necessary. Because CSS3 transitions, transitions, and animation effects are used, only modern browsers such as Chrome, Firefox, and Safari are supported.

Github：https://github.com/IanLunn/Hover

Magic.css

Magic CSS3 Animations is a unique set of CSS3 Animations that can be freely used on the web. Simply include the CSS file magic.css or the compressed version magic.min.css on the page.

Github：https://github.com/miniMAC/magic

React Spring

React-Spring is a spring-physics-based animation library that meets most UI related animation needs, providing tools flexible enough to confidently project ideas into ever-changing interfaces. This library represents a modern approach to animation. It inherits the powerful interpolation and performance of animated, as well as the ease of use of react-motion.

GitHub：https://github.com/pmndrs/react-spring

React Reveal

React Reveal is a high-performance animation library for React. It has a small footprint and was written specifically for React in ES6. Can be used to create a variety of cool scrolling effects display.

GitHub：https://github.com/rnosov/react-reveal

Greensock

GreenSock is a JavaScript animation library that easily animates HTML elements. Used to create high-performance, zero-dependency, cross-browser animations that claim to be used in more than 4 million websites. It has the following characteristics:

Fast speed, specially optimized animation performance, so that it can achieve the same high-performance animation effect as css.

Lightweight and modular. The modular and plug-in architecture keeps the core engine lightweight, and the TweenLite package is very small (basically less than 7kb). TweenLite, TimelineLite, TimelineMax and TweenMax animation modules are provided for different functions, you can use them on demand.

No dependency.

Flexible control. Instead of being limited to linear sequences, you can overlap animation sequences, and you can flexibly animate with minimal code through precise timing control.

Any object can be animated.

Github：https://github.com/greensock/GreenSock-JS/

Velocity.js

Velocity.js is a javascript implementation of the velocity template syntax. Velocity is a Java-based template engine widely used in various subsidiaries of Alibaba Group. Velocity template is suitable for scenarios where a large number of templates are used. It supports complex logical operations and includes functions such as this data type, variable assignment and function. It also has color animation, transformations, loops, slow motion, SVG animation, and scrolling animation. Velocity.js supports Node.js and browser environments.

It has the following characteristics:

Support for client and server use

Grammar is a logical, micro-structured language

Parsing and template rendering separation

Basic and complete support for velocity syntax

The browser uses a mechanism to support mutual references between templates, based on kissy module loading

GitHub：http://github.com/julianshapiro/velocity

Lax.js

Lax.js is a native zero-dependency JavaScript animation plug-in that follows the page slide. This plug-in is very lightweight and the compressed version is only 3kb in size. When sliding the page, help create cool animation effects, such as scrolling parallax, deformation movement and other basic animation effects, responsive compatibility, such as mobile phone also has good support. In addition to using the plug-in default integrated animation properties, you can also customize more rich animation properties.

GitHub：https://github.com/alexfoxy/lax.js

Rellax.js

rellax.js is a lightweight, pure JavaScript scrolling visual effects plugin. The compressed version of rellax.js is only 871 bytes. In small screen devices such as mobile phones, plug-ins automatically limit visual differences.

Github：https://github.com/dixonandmoe/rellax

three.js

three.js is an easy-to-use, lightweight, cross-browser, generic JavaScript 3D library, a WebGL-based Javascript library that provides a simpler Javascript API than WebGL, allowing developers to easily create 3D drawings in the browser.

GitHub：https://github.com/mrdoob/three.js/

wow.js

WOW.js is a plugin that helps you trigger CSS animations when scrolling through pages. It relies on animate.css, so it supports more than 60 animation effects of animate.css, which can change the style, delay, length, offset and iteration of animation settings to meet various needs.

GitHub：https://github.com/graingert/wow

AniJS

AniJS allows us to create animated styles for websites without any JavaScript or CSS coding! You can specify all animations in HTML using simple If-On-Do-To syntax

GitHub：https://github.com/anijs/anijs

Anime.js

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. CSS properties, SVG, DOM, and JavaScript objects can be animated. It is very lightweight, gzip compressed only about 9kb.

GitHub：https://github.com/juliangarnier/anime/

Typed.js

Typed.js is a typed library that displays a paragraph in typewriter style. You can customize any string, specify the display speed, specify whether to loop, etc.

GitHub：https://github.com/mattboldt/typed.js/

Vivus

Vivus is a lightweight JavaScript library (with no dependencies) that allows us to animate SVGs to make them look like they were drawn. It has a variety of different animations available, as well as the option to create custom scripts to draw SVG any way you like.

GitHub：https://github.com/maxwellito/vivus

Popmotion

Popmotion is a 12KB JavaScript motion engine that can be used for animation, physics effects, and input tracking. Native DOM support: CSS, SVG, SVG path and DOM attribute support out of the box.

GitHub：https://github.com/popmotion/popmotion

Granim.js

Granim.js is a small JavaScript library for creating smooth interactive fluid animations in web pages. Granim.js can achieve all kinds of desired gradient animation effects, making web pages richer in color and better in visual effects!

GitHub：https://github.com/sarcadass/granim.js

Kute.js

Kute.js is a native Javascript animation engine with excellent performance and modular code. It provides a bunch of tools to help create custom animations. It provides easy-to-use ways to set up high-performance, cross-browser animations.

GitHub：https://github.com/thednp/kute.js

Simple Parallax

simpleParallax.js is a very simple and compact Vanilla JS library that adds parallax animation to any image. It stands out for its ease of use and visual rendering. The parallax effect is applied directly to the image label without using a background image.

GitHub：https://github.com/geosigno/simpleParallax.js

Barba.js

Barba.js is a small (4kb compressed and zipped), flexible and dependencies free library that helps you create smooth and smooth transitions to your website pages. It reduces latency between pages, minimizes browser HTTP requests and enhances the user's Web experience.

GitHub：https://github.com/barbajs/barba

mo.js

Mo.js is a simple, efficient graphical animation library with smooth animation and amazing user experience. Screen density independent works well on any device. Built-in shapes or custom shapes can be drawn. Multiple animations can be drawn and chained together.

GitHub：https://github.com/mojs

Particles.js

Particles.js is a lightweight JavaScript library for creating particle effects on web pages.

GitHub：https://github.com/VincentGarreau/particles.js/

tsParticles

tsParticles makes it easy to create highly customizable particle animations and use them as animated backgrounds for websites. Available out-of-the-box components for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot, and Web Components.

GitHub：https://github.com/matteobruni/tsparticles

Rough Notation

Rough Notation is a small JavaScript library for creating and animating annotations on web pages. It uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a variety of different styles. Animation duration can be configured, or just turned off. The compressed size is only 3.83kb.

GitHub：https://github.com/rough-stuff/rough-notation

Animate on Scroll

Animate on Scroll is a JavaScript animation library that creates animations on the page.

GitHub：https://github.com/topics/animate-on-scroll

Framer Motion

Motion is Framer's React's production-ready motion library. It brings declarative animation, easy layout transitions, and gestures while maintaining HTML and SVG semantics. Motion extends React's event system with a powerful Gesture Recognition. It supports hover, click, pan and drag. Note that Motion requires React 16.8 or later.

GitHub：https://github.com/framer/motion

React Motion

React Motion is an animation library for React apps that makes it easy to create and implement realistic animations.

GitHub：https://github.com/chenglou/react-motion

About "what are the good JavaScript animation libraries" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.