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#

function FadeEx() {
  const { isOpen, onToggle } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <Fade in={isOpen}>
        <Box
          p='40px'
          color='white'
          mt='4'
          bg='teal.500'
          rounded='md'
          shadow='md'
        >
          Fade
        </Box>
      </Fade>
    </>
  )
}

ScaleFade transition#

function ScaleFadeEx() {
  const { isOpen, onToggle } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <ScaleFade initialScale={0.9} in={isOpen}>
        <Box
          p='40px'
          color='white'
          mt='4'
          bg='teal.500'
          rounded='md'
          shadow='md'
        >
          Fade
        </Box>
      </ScaleFade>
    </>
  )
}

Slide transition#

function SlideEx() {
  const { isOpen, onToggle } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <Slide direction='bottom' in={isOpen} style={{ zIndex: 10 }}>
        <Box
          p='40px'
          color='white'
          mt='4'
          bg='teal.500'
          rounded='md'
          shadow='md'
        >
          <Lorem count={2} />
        </Box>
      </Slide>
    </>
  )
}

Slide Fade transition#

function SlideFadeEx() {
  const { isOpen, onToggle } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <SlideFade in={isOpen} offsetY='20px'>
        <Box
          p='40px'
          color='white'
          mt='4'
          bg='teal.500'
          rounded='md'
          shadow='md'
        >
          <Lorem count={1} />
        </Box>
      </SlideFade>
    </>
  )
}

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.

function CollapseEx() {
  const { isOpen, onToggle } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <Collapse in={isOpen} animateOpacity>
        <Box
          p='40px'
          color='white'
          mt='4'
          bg='teal.500'
          rounded='md'
          shadow='md'
        >
          <Lorem count={1} />
        </Box>
      </Collapse>
    </>
  )
}

Changing the startingHeight#

function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} in={show}>
        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.
      </Collapse>
      <Button size='sm' onClick={handleToggle} mt='1rem'>
        Show {show ? 'Less' : 'More'}
      </Button>
    </>
  )
}

Props#

The transition components extends the framer-motion.

Fade Props#

`in`

Description

Show the component; triggers the 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 the 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

`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 the 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 the 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 the 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