# zoom

> A fade paired with a scale, entering from slightly smaller than rest and exiting back down to it: sugar over enterExit for the dialog/menu/ popover "pop" that most overlay surfaces in the catalog use by default.

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

A fade paired with a scale, entering from slightly smaller than rest and
exiting back down to it: sugar over enterExit for the dialog/menu/
popover "pop" that most overlay surfaces in the catalog use by default.

## 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` | Exit-state scale factor (e.g. `0.95`). Defaults to `0.95`. |
| `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. |