Animated visibility

Tip

View source on GitHub →

Allows showing/hiding content in an animated way. After hiding, the content is unmounted from the DOM.

<AnimatedVisibility
	visibility={myVariable}
>
	<span>Your content goes here</span>
</AnimatedVisibility>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Transitions

<AnimatedVisibility
	visibility={myVariable}
	transition='scaleFade'
>
	<span>This is demo content</span>
</AnimatedVisibility>

Skipping initial transition

If you want to skip the initial transition (when the component mounts), and just want to transition when the visibility changes afterwards, you can use the noInitial prop.

<AnimatedVisibility
	visibility={myVariable}
	noInitial
>
	<span>Your content goes here</span>
</AnimatedVisibility>