Jump to content

Animate between two react components

Posted in React · 1 minute read

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
Animate React component by calling 'setState' in 'componentDidMount'
Plx - React parallax component

Comments (2)

30. October 2017
Stanko

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.

30. October 2017
Aibol

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

ArtBlogProjectsAboutStatsRSS feedGitHub