# startingStyle

> Wraps utilities in `@starting-style`, defining the values a transition animates from — for entry fade/scale-ins on dialogs, tooltips, popovers, and other elements starting `display: none` or in the top layer.

```ts
import { startingStyle } from "@sdxc/u/responsive";
```

Wraps utilities in `@starting-style`, defining the values a transition
animates from — for entry fade/scale-ins on dialogs, tooltips, popovers,
and other elements starting `display: none` or in the top layer.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.startingStyle(u.opacity(0))` | `css({ "@starting-style": { opacity: "0" } })` |

## Examples

### Basic example

Use `startingStyle(...)` to set the values an element transitions from when it first appears, like a popover leaving `display: none`. Open the popover:

```tsx
<div>
	<button
		type="button"
		popovertarget="starting-style-fade"
		mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
	>
		Show tip
	</button>
	<div
		id="starting-style-fade"
		popover="auto"
		mix={[
			opacity(100),
			transition("opacity, display, overlay", { duration: 400 }),
			transitionBehavior("allow-discrete"),
			startingStyle(opacity(0)),
			...,
		]}
	>
		Press Escape to close.
	</div>
</div>
```

### Animating a dialog in

Pass several utilities to animate more than one property, like a dialog that grows into place. Open the dialog:

```tsx
<div>
	<button
		type="button"
		commandfor="starting-style-dialog"
		command="show-modal"
		mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
	>
		Open dialog
	</button>
	<dialog
		id="starting-style-dialog"
		mix={[
			opacity(100),
			scaleProperty(1),
			transition("opacity, scale, display, overlay", { duration: 300 }),
			transitionBehavior("allow-discrete"),
			startingStyle([opacity(0), scaleProperty(0.9)]),
			...,
		]}
	>
		<div mix={[vstack({ gap: 3 })]}>
			<p>Changes saved.</p>
			<button
				type="button"
				commandfor="starting-style-dialog"
				command="close"
				mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
			>
				Close
			</button>
		</div>
	</dialog>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.startingStyle(u.opacity("2.75rem"))
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.startingStyle(u.opacity(0)))
```

## Signature

```ts
u.startingStyle(input: UtilityInput<Node>)
```