image

React animation libraries

Notable React libraries or wrappers to help you build complicated animations

Take a look at React animation libraries that can be integrated with React for interactive and attractive web pages.


Framer Motion

image

www.framer.com

Framer Motion is a production-ready animation library for React. It does spring animations, keyframes, gestures, layouts, svg paths, and a whole lot more.

React Spring

image

www.react-spring.io

react-spring is 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

image

github.com

React Motion is 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

image

reactcommunity.org

React Transition Group is 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

image

github.com

A library to animate HTML, SVG & React-Native. Fine-grained control of delay, duration and easing

React Reveal

image

www.react-reveal.com

React Reveal provides 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

image

github.com

React Lottie is a wrapper on lottie-web to render After Effects animations.