---
title: FadeScale
description: "`FadeScale` is a component that gradually scales up to reveal or scales down to hide an element."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fade-scale
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-fadescale--basic
---

# FadeScale

`FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)
```

## Usage

```tsx
import { FadeScale } from "@yamada-ui/react"
```

```tsx
import { FadeScale } from "@/components/ui"
```

```tsx
import { FadeScale } from "@workspaces/ui"
```

```tsx
<FadeScale />
```

### Change the initial scale value

To change the initial scale value, set a number to `scale`. The element will scale based on this value, starting from and shrinking to it. The default is `0.95`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} scale={0.75} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)
```

### Change the Duration

To change the duration, set a number (in seconds) to `duration`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} duration={0.4} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)
```

### Unmount on Exit

To unmount the component when it is not visible, set `unmountOnExit` to `true`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} unmountOnExit borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>

    <Box borderWidth={1} p="md" rounded="l2" w="full">
      俺はたった今からデータを捨てる！そして俺は過去を凌駕する！
    </Box>
  </VStack>
)
```

## Props

| Prop            | Default | Type                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as`            | -       | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                                                                                                                                                                                                                                                                                                                                                                  |
| `asChild`       | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                                                                                                                                                                                                                                                                                                                                                   |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                                                                                                                                                                                                                                                                                                                                                              |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                                                                                                                                                                                                                                                                                                                                                  |
| `enter`         | -       | `any`                                                                                                                     | Custom `enter`.                                                                                                                                                                                                                                                                                                                                                                                              |
| `exit`          | -       | `any`                                                                                                                     | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial`       | -       | `any`                                                                                                                     | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)                                                                                                                                                                                                                                |
| `delay`         | `0`     | `MotionLifecycleProps<number> \| number`                                                                                  | Custom `delay` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                            |
| `duration`      | `0.2`   | `MotionLifecycleProps<number> \| number`                                                                                  | Custom `duration` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                         |
| `open`          | -       | `boolean`                                                                                                                 | Show the component. triggers when enter or exit states.                                                                                                                                                                                                                                                                                                                                                      |
| `reverse`       | `true`  | `boolean`                                                                                                                 | If `true`, the element will transition back to exit state.                                                                                                                                                                                                                                                                                                                                                   |
| `scale`         | `0.95`  | `number`                                                                                                                  | The initial scale of the element.                                                                                                                                                                                                                                                                                                                                                                            |
| `transition`    | -       | `MotionLifecycleProps<Transition>`                                                                                        | Custom `transition` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                       |
| `transitionEnd` | -       | `MotionLifecycleProps<ResolvedValues>`                                                                                    | Custom `transitionEnd` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                    |
| `unmountOnExit` | -       | `boolean`                                                                                                                 | If `true`, the element will unmount when `open={false}` and animation is done.                                                                                                                                                                                                                                                                                                                               |

## Similar Components

- [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display.
- [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element.
- [Slide](https://yamada-ui.com/docs/components/slide.md): `Slide` is a component that shows or hides an element from the corners of the page.
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.
- [Accordion](https://yamada-ui.com/docs/components/accordion.md): `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
- [Airy](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements.
- [Drawer](https://yamada-ui.com/docs/components/drawer.md): `Drawer` is a component for a panel that appears from the edge of the screen.
- [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping.

## Uses Components & Hooks

- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.

## Used By Components & Hooks

- [Popover](https://yamada-ui.com/docs/components/popover.md): `Popover` is a component that floats around an element to display information.