[ @sdxc/u/responsive ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

Press Escape to close.

<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:

<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.

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

Applying on a state

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

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

Signature

u.startingStyle(input: UtilityInput<Node>)