Animations in any web apps can be done through Web Animations API, CSS Animations or CSS Transitions. Animation libraries can introduce new concepts like motions or springs but very much rely on above APIs.
Animation has the ability to convey a deeper meaning than imagery and text alone. In React, you can use following animation libraries to achieve fancy animations faster and more attractive.
- Framer Motion - A production-ready animation library for React. It does spring animations, keyframes, gestures, layouts, svg paths, and a whole lot more.
- React Spring - A spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.
- React Motion - A popular library for animations in React. It makes use of physics to create animations that feel natural. All we have to do to create realistic animations is provide values for stiffness and damping and React Motion takes care of the rest.
- React Transition Group - Not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.
- React Move - A library to animate HTML, SVG & React-Native. Fine-grained control of delay, duration and easing.
- React Reveal - A dead simple way to add cool reveal-on-scroll animations to your React app. In addition, it has a first class support for collapsing elements thereby abolishing the need for the universally hated popups.
- React Lottie - A wrapper on lottie-web to render After Effects animations. Lottie provides many flexible After Effects features, allows you to manipulate your animation any way you like, and has small file sizes.