# viewReveal

> Plays a translate-and-fade entry as the element scrolls into view; out and back replays it.

```ts
import { viewReveal } from "@sdxc/ui/animations";
```

Plays a translate-and-fade entry as the element scrolls into view; out and
back replays it. `@keyframes` names are document-global, so one shared set
reads its distance from a custom property, mirrored under `:dir(rtl)`.

## Signature

```ts
viewReveal(options?: ViewReveal.Options): CSSMixinDescriptor
```

Returns: A style mixin, applicable through a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `ViewReveal.Options` | Tuning for the reveal's direction, distance, and range. |

## Examples

```tsx
mix={viewReveal({ from: "inline-start", distance: "2rem" })}
```

## Used with it

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

### ViewReveal.Options

Options tuning an element's entry motion as it scrolls into view.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `from?` | `Direction` | Logical edge the element translates in from. Defaults to `"block-end"` — the element rises into place, matching the most common reveal-on-scroll convention. |
| `distance?` | `string` | CSS length the element starts offset by. Ignored when `from` is `"none"`. Defaults to `"1.5rem"`. |
| `axis?` | `"block" \| "inline"` | Scroll axis the element's view-timeline progresses along: `"block"` for a vertically scrolling page or panel, `"inline"` for a horizontally scrolling one, such as a Carousel. Defaults to `"block"`. |
| `range?` | `string` | Named view-timeline range the reveal completes over. Defaults to `"entry"` — the reveal finishes once the element has fully entered the scrollport and stays settled for the remainder of scroll. |

### ViewReveal.Direction

Edge an element's entry motion translates in from, expressed as a
logical direction so it stays correct under both writing directions.
`"none"` fades the element in place.

#### Signature

```ts
type ViewReveal.Direction = "block-start" | "block-end" | "inline-start" | "inline-end" | "none"
```

One of `"block-start"`, `"block-end"`, `"inline-start"`, `"inline-end"`, `"none"`.