Transitions

Chakra 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 "@chakra-ui/react"

Usage#

Fade transition#

Fade
Editable Example

ScaleFade transition#

Fade
Editable Example

Slide transition#

Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.

Editable Example

Slide Fade transition#

Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

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#

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Editable Example

Props#

The transition components extends the framer-motion.

Fade Props#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states-
unmountOnExitbooleanIf `true`, the element will unmount when `in={false}` and animation is done-

ScaleFade Props#

NameTypeDescriptionDefault
inbooleanShow the component; triggers the enter or exit states-
initialScalenumberThe initial scale of the element0.95
reversebooleanIf `true`, the element will transition back to exit state-
unmountOnExitbooleanIf `true`, the element will unmount when `in={false}` and animation is done-

Slide Props#

NameTypeDescriptionDefault
direction"top" | "right" | "bottom" | "left"The direction to slide from"right"
inbooleanShow the component; triggers the enter or exit states-
unmountOnExitbooleanIf `true`, the element will unmount when `in={false}` and animation is done-

SlideFade Props#

NameTypeDescriptionDefault
inbooleanIf `true`, the content will animate in-
offsetXstring | numberThe offset on the horizontal or `x` axis0
offsetYstring | numberThe offset on the vertical or `y` axis8
reversebooleanIf `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade outtrue
unmountOnExitbooleanIf `true`, the element will unmount when `in={false}` and animation is done-

Collapse Props#

NameTypeDescriptionDefault
animateOpacitybooleanIf `true`, the opacity of the content will be animatedtrue
endingHeightstring | numberThe height you want the content in its expanded state."auto"
inbooleanIf `true`, the content will be expanded-
startingHeightstring | numberThe height you want the content in its collapsed state.0
unmountOnExitbooleanIf `true`, the element will unmount when `in={false}` and animation is done-
Edit this page