# zoom

> A fade paired with a scale, entering from slightly smaller than rest and exiting halfway back down to it, so leaving reads quieter than arriving: sugar over enterExit for the dialog/menu/popover "pop".

```ts
import { zoom } from "@sdxc/ui/animations";
```

A fade paired with a scale, entering from slightly smaller than rest and
exiting halfway back down to it, so leaving reads quieter than arriving:
sugar over enterExit for the dialog/menu/popover "pop".

## Signature

```ts
zoom(options?: Zoom.Options): CSSMixinDescriptor
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `Zoom.Options` | Exit-state opacity and scale, timing, and entered-state selector. |

## Examples

```tsx
<dialog id="confirm-delete" mix={zoom({ scale: 0.9, duration: durations.normal })}>
	...
</dialog>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### Zoom.Options

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `opacity?` | `number` | Exit-state opacity (0 to 1). Defaults to `0`. |
| `scale?` | `number` | Scale factor the host enters from (e.g. `0.95`). Defaults to `0.95`. |
| `blur?` | `number` | Blur radius in pixels the host softens from and to while it scales. |
| `duration?` | `number` | Transition duration in milliseconds. Defaults to `durations.normal`. |
| `easing?` | `string` | A `transition-timing-function` value. Defaults to `easings.standard`. |
| `when?` | `string` | A selector fragment overriding the default `[open]`/`:popover-open` entered state. |