Transitions

Nature UI exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.

Import#

Most transition components are made using framer-motion. They accept the following props:

  • Common props from framer's motion elements
  • in prop used to trigger the transition
  • unmountOnExit prop used to unmount the component when it is not visible.
import { Fade, ScaleFade, Slide, SlideFade } from '@nature-ui/core';

Usage#

Fade transition#

Editable Example

ScaleFade transition#

Editable Example

Slide transition#

Editable Example

Slide Fade transition#

Editable Example

Collapse transition#

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Editable Example

Changing the startingHeight#

Editable Example

Props#

The transition components extends the framer-motion.

Fade Props#

NameTypeDefaultDescription
isOpenboolean-Show the component; triggers the enter or exit states
unmountOnExitboolean-If true, the element will unmount when in={false} and animation is done

ScaleFade Props#

NameTypeDefaultDescription
isOpenboolean-Show the component; triggers the enter or exit states
initialScalenumber0.95The initial scale of the element
unmountOnExitboolean-If true, the element will unmount when in={false} and animation is done

Slide Props#

NameTypeDefaultDescription
placement"top" | "right" | "bottom" | "left""right"The direction to slide from
isOpenboolean-Show the component; triggers the enter or exit states
unmountOnExitboolean-If true, the element will unmount when in={false} and animation is done

SlideFade Props#

NameTypeDefaultDescription
isOpenboolean-If true, the content will animate in
initialOffsetstring-The offset on the vertical or y axis
unmountOnExitboolean-If true, the element will unmount when in={false} and animation is done

Collapse Props#

NameTypeDefaultDescription
animateOpacityboolean-If true, the opacity of the content will be animated
isOpenbooleanfalseIf true, the content will be expanded
startingHeightstring | number0The height you want the content in its collapsed state.
unmountOnExitboolean-If true, the element will unmount when in={false} and animation is done