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

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#

Name	Type	Description	Default
in	`boolean`	Show the component; triggers the enter or exit states	-
unmountOnExit	`boolean`	If `true`, the element will unmount when `in={false}` and animation is done	-

ScaleFade Props#

Name	Type	Description	Default
in	`boolean`	Show the component; triggers the enter or exit states	-
initialScale	`number`	The initial scale of the element	`0.95`
reverse	`boolean`	If `true`, the element will transition back to exit state	-
unmountOnExit	`boolean`	If `true`, the element will unmount when `in={false}` and animation is done	-

Slide Props#

Name	Type	Description	Default
direction	`"top" \| "right" \| "bottom" \| "left"`	The direction to slide from	`"right"`
in	`boolean`	Show the component; triggers the enter or exit states	-
unmountOnExit	`boolean`	If `true`, the element will unmount when `in={false}` and animation is done	-

SlideFade Props#

Name	Type	Description	Default
in	`boolean`	If `true`, the content will animate in	-
offsetX	`string \| number`	The offset on the horizontal or `x` axis	`0`
offsetY	`string \| number`	The offset on the vertical or `y` axis	`8`
reverse	`boolean`	If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out	`true`
unmountOnExit	`boolean`	If `true`, the element will unmount when `in={false}` and animation is done	-

Collapse Props#

Name	Type	Description	Default
animateOpacity	`boolean`	If `true`, the opacity of the content will be animated	`true`
endingHeight	`string \| number`	The height you want the content in its expanded state.	`"auto"`
in	`boolean`	If `true`, the content will be expanded	-
startingHeight	`string \| number`	The height you want the content in its collapsed state.	`0`
unmountOnExit	`boolean`	If `true`, the element will unmount when `in={false}` and animation is done	-

Edit this page