react-easy-transitions

React Transitions

Low verbose, JSX tags that provides transitions for a single object while it's mounting and unmounting.

Right now its uses the Hooks API and works with functional components.

The ready-to-use transitions are:

• Fade;
• Scale;
• SlideLeft;
• SlideRight;

Install with:

npm install react-easy-transitions

Or

yarn add react-easy-transitions

Import to you project with

import Animation from 'react-easy-transitions'

And use it like:

const [visible, setVisible] = useState(false) 

<Animation.Fade controller={visible}>
    <MyObject />
</Animation.Fade>

Also, you can customize the animation, passing the duration, a CSS class for the mount and another for the unmount, like so:

<Animation.Custom 
    controller={someStatefulVariable}
    time={200}
    animIn={"slideLeft"}
    animOut={"slideRight"}
>
    <SomeCoolObject />
</Animation.Custom>

* Please note that the Animation will not work with already animated components, though it will be fixed in a near future.