slide-up

Fades in while sliding up from slightly below. Menus and content anchored above their trigger.

Use it

data-motion="slide-up"

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~="slide-up"] {
  --motion-from-opacity: 0;
  --motion-from-y: var(--motion-distance);
}

Composition

Composes with fade, scale-fade. Combine them with a space.

data-motion="slide-up fade"

Hosts

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