Most of the time we will do some animation effects to improve user experience and page aesthetics in the development of the front-end page, so today to recommend you a few good JavaScript animation library, I hope to help you friends!
This article was first published on wechat public account: Front-end Charging Treasure
My wechat: CUG-gz
Animate.css
Animate. CSS is a collection of animation effects created using CSS3 animation.
GitHub:github.com/animate-css…
Hover.css
Hover. CSS is a CSS3 based mouse Hover effect and animation that can be easily applied to buttons, logos and images. All of these effects require a single tag, using before and after pseudo-elements when necessary. Only modern browsers like Chrome, Firefox, and Safari are supported because of the CSS3 transitions, transitions, and animations.
Github:github.com/IanLunn/Hov…
Magic.css
Magic CSS3 Animations is a unique CSS3 Animations package that can be used freely on the web. Simply add the CSS file magic. CSS or a compressed version of magic.min.css to the page to use it.
Github:github.com/miniMAC/mag…
React Spring
React-spring is an animation library based on spring physics that meets most UI-related animation needs, providing tools flexible enough to confidently project ideas into an ever-changing interface. The 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:github.com/pmndrs/reac…
React Reveal
React Reveal is a high performance animation library for React. It takes up little space and was written specifically for React in ES6. Can be used to create a variety of cool scrolling displays.
GitHub:github.com/rnosov/reac…
Greensock
GreenSock is a JavaScript animation library that makes it easy to animate HTML elements. Used to create high-performance, zero-dependency, cross-browser animations claimed to be used on over 4 million websites. It has the following characteristics:
- Fast, 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 structure keeps the core engine lightweight, and the TweenLite package is very small (basically under 7KB). Provides TweenLite, TimelineLite, TimelineMax and TweenMax animation modules with different functions that you can use on demand.
- There is no dependency.
- Flexible control. Animation sequences can be overlapped without being limited to linear sequences, and animation can be achieved with the flexibility of using minimal code with precise time control.
- 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 templating engine widely used in ali group’s subsidiaries. Velocity templates are suitable for scenarios where large numbers of templates are used and support complex logical operations, including local data types, variable assignments, and functions. Also features: Color animation, Transforms, loops, easing, SVG animation, and rolling animation. Velocity.js supports node.js and browser environments.
It has the following characteristics:
- It can be used by clients and servers
- Syntax is rich in logic and constitutes a micro-language
- Parsing and template rendering are separated
- Basically full support for Velocity syntax
- Browsers use supported 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 plug-in that slides along a page. This plug-in is very lightweight, and the compressed version is only 3KB. Help to create cool animation effects when sliding, such as basic animation effects such as parallax scrolling and deformation movement, and responsive compatibility, such as good support on mobile phones. In addition to using the plugin’s default integrated animation properties, you can also customize richer animation properties.
GitHub:github.com/alexfoxy/la…
Rellax.js
Rellax. Js is a lightweight plugin for pure JavaScript scrolling visuals. Rellax. Js is only 871 bytes compressed, and the plugin automatically limits the visual difference feature on small screen devices such as mobile phones.
three.js
Three. Js is an easy to use, lightweight, cross-browser universal JavaScript 3D library. It is a set of JavaScript function library developed based on WebGL, which provides simpler JavaScript API than WebGL. Make it easy for developers to create 3D drawings in the browser.
GitHub:github.com/mrdoob/thre…
wow.js
Wow. js is a plugin that allows you to trigger CSS animations when scrolling. It relies on animate. CSS, so it supports animate. CSS with more than 60 animation effects, you can change the animation Settings to your favorite style, delay, length, offset, iteration, etc.
GitHub:github.com/graingert/w…
AniJS
AniJS allows us to create animated styles for websites without any JavaScript or CSS coding! You can specify all animations in HTML using a simple if-on-do-to syntax
GitHub：github.com/anijs/anijs
Anime.js
Animo.js is a lightweight JavaScript animation library with a simple and powerful API. Animate CSS properties, SVG, DOM, and JavaScript objects. It’s lightweight, gzip compressed to about 9KB.
GitHub:github.com/juliangarni…
Typed.js
Typed. Js is a typed library. The effect is to display a typed message on a typewriter. You can customize any string, specify the display speed, specify whether to loop, etc.
GitHub:github.com/mattboldt/t…
Vivus
Vivus is a lightweight JavaScript library (with no dependencies) that allows us to animate SVG to make it look like they’ve been drawn. It has a variety of different animations available, as well as the option to create custom scripts to draw SVG in any way you like.
GitHub:github.com/maxwellito/…
Popmotion
Popmotion is a 12KB JavaScript motion engine that can be used for animation, physics and input tracking. Native DOM support: SUPPORT for CSS, SVG, SVG paths, and DOM attributes, out of the box.
GitHub:github.com/popmotion/p…
Granim.js
Granim.js is a small JavaScript library for creating smooth interactive fluid animations in web pages. Granim.js can animate as many gradients as you want, making web pages richer in color and more visually pleasing!
GitHub:github.com/sarcadass/g…
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 an easy-to-use way to set up high-performance, cross-browser animations.
GitHub:github.com/thednp/kute…
Simple Parallax
Simpleparallax. js is a very simple and small Vanilla JS library that can add 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 the background image.
GitHub:github.com/geosigno/si…
Barba.js
Barba.js is a small (4KB compressed and compressed), flexible and dependency-free library that helps you create smooth and smooth transitions to web pages. It reduces latency between pages, minimizes browser HTTP requests and enhances the user’s Web experience.
GitHub:github.com/barbajs/bar…
mo.js
Mo.js is a clean, efficient graphic animation library with smooth animations and an amazing user experience. On any device, screen density works well independently, you can draw built-in shapes or custom shapes, and you can draw multiple animations and string them together.
GitHub：github.com/mojs
Particles.js
Particles. Js is a lightweight JavaScript library for creating granular effects on web pages.
GitHub:github.com/VincentGarr…
tsParticles
TsParticles makes it easy to create highly customizable particle animations and use them as animated backgrounds for websites. Available off-the-shelf components for React. Js, vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot, and Web components.
GitHub:github.com/matteobruni…
Rough Notation
Rough Notation is a small JavaScript library for creating and animating annotations on web pages. It uses RoughJS to create a hand-painted look and feel. Elements can be annotated in a number of different styles. Animation duration can be configured or simply turned off. The compressed size is only 3.83 KB.
GitHub:github.com/rough-stuff…
Animate on Scroll
Animate on Scroll is a JavaScript animation library that creates animations at page time.
GitHub:github.com/topics/anim…
Framer Motion
Motion is Framer’s React production-ready Motion library. It brings declarative animation, easy layout transformations, and gestures while preserving HTML and SVG semantics. Motion extends React’s event system with a powerful gesture recognizer. It supports hovering, clicking, panning, and dragging. Note that Motion requires React 16.8 or later.
GitHub:github.com/framer/moti…
React Motion
React Motion is an animation library for React applications that makes it easy to create and implement realistic animations.
GitHub:github.com/chenglou/re…