Skip to main content

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

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

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 when 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 when 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
Default
true

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 when 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 when 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 when 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