[ @sdxc/ui/animations ]

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.

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

Signature

zoom(options?: Zoom.Options): CSSMixinDescriptor

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

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

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

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

Interface

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.