# Animate between two react components

DevFeed: [Animate between two react components](<https://devfeed.tech/articles/animate-between-two-react-components-37236.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/animate-between-two-react-components/>)

Author: Stanko

Published: 2017-10-24T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React UI animations](<https://devfeed.tech/topics/react-ui-animations.md>), [React](<https://devfeed.tech/topics/react.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [children](<https://devfeed.tech/tags/children.md>), [components](<https://devfeed.tech/tags/components.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

A proof of concept for transitioning between two React components. It animates the parent wrapper's height while fading the previous component out and the new component in when the children prop changes.

## Source excerpt

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.