Animate between two react components

Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other.

In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper.

Then it will animate wrapper's height to a new component's height, fade out previous component and fade in the new one. Finally when animation is finished it will reset wrapper's height to auto.

I might release it as a standalone npm component, but it needs some polishing before I do so. If you make use out of it, please share in the comments.

Comments (2)

Aibol
30. Oct 2017, 14:35

You should look at npm package - react-motion. It is good for making animations with changing component style.

Stanko
30. Oct 2017, 14:54

Hello Aibol,

You are right, react-motion is nice library, but it is also huge one. For simple animations I prefer doing them myself, instead of importing large dependencies of which I'll use just a tiny portion.

This is just proof of concept, so take it with a grain of salt.