ContentToggle animates the moment one piece of content is replaced with another: steps of a wizard, chapters of an article or pages of a calendar. The outgoing content fades out and slides away while the new one arrives from the opposite side.
Pass the id property to describe which content is currently rendered. ContentToggle compares it between renders and starts the animation whenever the value changes, so it can be anything that identifies the current content: an index, an identifier or a boolean.
<ContentToggle id={step}>
<Text variant="body-2">{steps[step]}</Text>
</ContentToggle>Both the outgoing and the incoming content share the same grid cell, which means nothing around them shifts while the transition is running. The area keeps the size of the tallest of the two, so if your content varies in height, give the parent element a fixed size to keep the layout stable.
By default, the content slides out towards the end side of the screen. Pass the direction property to change it to start, for example to make the animation follow the direction the user is navigating in.
<ContentToggle id={step} direction={direction}>
<Text variant="body-2">{steps[step]}</Text>
</ContentToggle>