Transitions

Chakra exports four components `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to provide simple transitions.

    SourceTheme source@chakra-ui/transition

Props#

The transition components extends the framer-motion.

Fade Props#

in

Description

Show the component; triggers when enter or exit states

Type
boolean

unmountOnExit

Description

If true, the element will unmount when `in={false}` and animation is done

Type
boolean

ScaleFade Props#

in

Description

Show the component; triggers when enter or exit states

Type
boolean

initialScale

Description

The initial scale of the element

Type
number
Default
0.95

reverse

Description

If true, the element will transition back to exit state

Type
boolean
Default
true

unmountOnExit

Description

If true, the element will unmount when `in={false}` and animation is done

Type
boolean

Slide Props#

direction

Description

The direction to slide from

Type
SlideDirection
Default
"right"

in

Description

Show the component; triggers when enter or exit states

Type
boolean

unmountOnExit

Description

If true, the element will unmount when `in={false}` and animation is done

Type
boolean

SlideFade Props#

in

Description

Show the component; triggers when enter or exit states

Type
boolean

offsetX

Description

The offset on the horizontal or x axis

Type
string | number
Default
0

offsetY

Description

The offset on the vertical or y axis

Type
string | number
Default
8

reverse

Description

If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out

Type
boolean
Default
true

unmountOnExit

Description

If true, the element will unmount when `in={false}` and animation is done

Type
boolean

Collapse Props#

animateOpacity

Description

If true, the opacity of the content will be animated

Type
boolean
Default
true

endingHeight

Description

The height you want the content in its expanded state.

Type
string | number
Default
"auto"

in

Description

Show the component; triggers when enter or exit states

Type
boolean

startingHeight

Description

The height you want the content in its collapsed state.

Type
string | number
Default
0

unmountOnExit

Description

If true, the element will unmount when `in={false}` and animation is done

Type
boolean
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel