scale-fade

Fades in while scaling up slightly. Default choice for dialogs, dropdowns, and popovers.

Use it

data-motion="scale-fade"

What it sets

The preset only declares these. Everything else, duration and easing included, comes from the shared tokens, so overriding a token restyles every preset at once rather than one of them.

[data-motion~="scale-fade"] {
  --motion-from-opacity: 0;
  --motion-from-scale: var(--motion-scale);
}

Composition

Composes with slide-up. Combine them with a space.

data-motion="scale-fade slide-up"

Hosts

The same attribute across every host it supports. You never choose the mechanism; the host's own state attributes do.