Animations are fundamental to user experience. When it comes to building web and mobile app they have been generally difficult to add. So in this post we`ve collected 20 Useful React Animation Libraries that let you build cool and fun animations for web projects.

react-spring

A set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can’t cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn’t meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces.

react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM.

react-flight

The best way to build animation compositions for React. Design and compose a component to start with, a component to end with, and Flight will take it from there.

Pose

The Pose library is simple to use and very useful. You can use it to create animated and interactive components that you can reuse throughout your React website.

React-Motion

For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don’t have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

react-animations

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native

Boron

A collection of dialog animations with React.js.

Fluid Transitions

This project aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with React Navigation.

Animate Components

Elemental components for doing animation in React.

react-anime

A super easy animation library for React built on top of anime.js.

React Reveal

This is an animation framework for React. It’s MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animations in your application. If you liked this package, don’t forget to star the Github repository.

React Typist

React Component for making typing animations. Wrap Typist around your text or any element tree to animate text inside the tree. Easily stylable and highly configurable.

react-flip-toolkit

A React FLIP animation helper library for highly configurable transitions.

react-loading

React component for loading animations.

React Scroll Parallax

React components to create parallax scroll effects for banners, images or any other DOM elements.

Ant Motion

This is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.

react-stonecutter

Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation

react-particle-effect-button

Bursting particle effect buttons for React.

react-circle

Renders a svg circle + percentage. It just works.