Answer by Harshal for Animations with React

Check out this easy to use and popular package:

https://www.npmjs.com/package/react-transition-group

Install:

npm install react-transition-group

Usage:

import { CSSTransition } from 'react-transition-group';<CSSTransition  in={toShow} // boolean value passed via state/props to either mount or unmount this component  timeout={300}  classNames='my-element' // IMP!  unmountOnExit><ComponentToBeAnimated /></CSSTransition>

NOTE: Make sure to apply below styles using the class property in CSS:

.my-element-enter {  opacity: 0;  transform: scale(0.9);}.my-element-enter-active {  opacity: 1;  transform: translateX(0);  transition: opacity 300ms, transform 300ms;}.my-element-exit {  opacity: 1;}.my-element-exit-active {  opacity: 0;  transform: scale(0.9);  transition: opacity 300ms, transform 300ms;}