# scale-fade

Fades in while scaling up slightly. Default choice for dialogs, dropdowns, and popovers.

## Use it

```html
data-motion="scale-fade"
```

## What it sets

The preset only declares these. Everything else, duration and easing included, comes from the shared tokens, so overriding a token restyles every preset at once rather than one of them.

```css
[data-motion~="scale-fade"] {
  --motion-from-opacity: 0;
  --motion-from-scale: var(--motion-scale);
}
```

## Composition

Composes with `slide-up`. Combine them with a space.

```html
data-motion="scale-fade slide-up"
```

## Hosts

The same attribute across every host it supports. You never choose the mechanism, the host's own state attributes do.

| Host | Markup |
| --- | --- |
| radix | `<Dialog.Content data-motion="scale-fade" />` |
| base-ui | `<Dialog.Popup data-motion="scale-fade" />` |
| native-dialog | `<dialog data-motion="scale-fade">` |
| native-popover | `<div popover data-motion="scale-fade" />` |
| plain | `<div hidden data-motion="scale-fade" />` |