10 Front-end Animation Libraries to Make Your Interactions Cooler

Animate.css

animate.css is a CSS collection of animation effects made with CSS3 animation, which presets many kinds of commonly used animations, and is very simple to use.

GitHub:github.com/animate-css…

Hover.css

Hover.css is a set of CSS3-based mouseover effects and animations that can be easily applied to elements such as buttons, logos, and images. All of these effects require only a single tag, using the before and after pseudo-elements when necessary. Only modern browsers such as Chrome, Firefox and Safari are supported due to the use of CSS3 transitions, transitions and animations.

Github:github.com/IanLunn/Hov…

Magic.css

Magic CSS3 Animations is a unique CSS3 animation effects package that can be freely used in web pages. Simply include the CSS file on the page: magic.css or the minified version magic.min.css and you are ready to use it.

Github:github.com/miniMAC/mag…

React Spring

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

GitHub:github.com/pmndrs/reac…

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 effect displays.

GitHub:github.com/rnosov/reac…

Greensock

GreenSock is a JavaScript animation library that makes it easy to animate HTML elements. For creating high-performance, zero-dependency, cross-browser animations, claimed to be used in over 4 million websites. It has the following characteristics:

  • The speed is fast, and the animation performance is specially optimized to achieve the same high-performance animation effect as CSS.
  • Lightweight and modular. The modular and plug-in structure keeps the core engine lightweight, and the TweenLite package is very small (basically under 7kb). Provides animation modules with different functions of TweenLite, TimelineLite, TimelineMax and TweenMax, which you can use as needed.
  • No dependencies.
  • Flexible control. Instead of being limited to linear sequences, you can overlap animation sequences, with precise timing control, and the flexibility to animate with minimal code.
  • Any object can be animated.

Github:github.com/greensock/G…

Velocity.js

Velocity.js is a javascript implementation of velocity template syntax. Velocity is a Java-based template engine that is widely used in various subsidiaries of Alibaba Group. Velocity templates are suitable for scenarios where a large number of templates are used, and support complex logical operations, including functions such as this data type, variable assignment, and functions. Also has: color animation , transition animation (transforms) , looping , easing , SVG animation , and scroll animation and other features. Velocity.js supports Node.js and browser environments.

It has the following characteristics:

  • Supports both client and server use
  • Grammar is logical and constitutes a miniature language
  • Separation of parsing and template rendering
  • Basically fully supports velocity syntax
  • Browsers use support templates to reference each other, according to the kissy module loading mechanism

GitHub:github.com/julianshapi…

Lax.js

Lax.js is a native zero-dependency JavaScript animation plugin that slides along the page. This plugin is very lightweight and the compressed version is only 3kb. When sliding pages, it helps to create cool animation effects, such as basic animation effects such as scrolling parallax, deformation movement, etc. In terms of responsive compatibility, such as mobile phones, it also has good support. In addition to using the default integrated animation properties of the plugin, you can also customize richer animation properties.

GitHub:github.com/alexfoxy/la…

Rellax.js

rellax.js is a lightweight pure JavaScript scrolling parallax effect plugin. The compressed version of rellax.js is only 871 bytes. In small screen devices such as mobile phones, the plugin will automatically limit the visual aberration feature.

Github:github.com/dixonandmoe…

three.js

three.js is an easy-to-use, lightweight, cross-browser general-purpose JavaScript 3D library. It is a set of Javascript function libraries developed based on WebGL. It provides a simpler Javascript API than WebGL, allowing developers to Easily create 3D drawings in your browser.

GitHub:github.com/mrdoob/thre…

Finally, a front-end spree is given to everyone [Jiajun Yang: 581286372] to help everyone learn better!

Guess you like

Origin blog.csdn.net/BYGFJ/article/details/123223850