Web Development Tools

Anime.js + React Transition Group

Using Velocity.js and React Transition Group for beautiful and sequential animations in React

Animation is pretty tough job in React. Normally, when a component mounts, you want to animate the component in like fade-in or slide-up or something.

That’s very easy. When component mounts, mount it with in class which has CSS transition (like opacity 0 →1) and use setTimeout to remove that class once transition is completed. But problem comes when component unmounts. Inside componentWillUnmount life-cycle method, you can add out class to the component but component will immediately unmount before CSS transition completes. You need some mechanism to delay unmounting of the component until CSS transition completes. This is where React Transition Groups (RTG) comes into the picture.

RTG package is open-source, developed by some React enthusiasts and focuses on mounting-unmounting logic of a component at it’s core. It has moved from v1 to v2 recently and there are major differences between two versions. In v1, RTG provided lifecycle method likes componentWillEnter(doneCb) and componentWillLeave(doneCb) using which you could defer the mounting and unmoving of the component. The only thing you need to do is wrap you…