Transitions

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

chakra ui pro

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
"top" | "right" | "bottom" | "left"
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

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel