Animate between two react components

24. October 2017
Posted in React
· 1 minute read
2 Comments

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.

Related Posts

React animate height (slide up/down) component
06. March 2017
HTML inert property and React fallback
21. December 2023
Simple video buffering loader in React
16. October 2020

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.