Transitions

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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

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>
    </>
  )
}

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>
    </>
  )
}

Editable Example

ScaleFade transition#

Fade

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>
    </>
  )
}

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>
    </>
  )
}

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.

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>
    </>
  )
}

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>
    </>
  )
}

Editable Example

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>
    </>
  )
}

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>
    </>
  )
}

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.

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>
    </>
  )
}

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>
    </>
  )
}

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.

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>
    </>
  )
}

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>
    </>
  )
}

Editable Example

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

"bottom" | "left" | "right" | "top"

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

Edit this page