# scrollFade

> Fades a scroll container's own edges through a mask on the scrolling element itself: each edge reads opaque once scroll reaches it and feathers while content lies beyond.

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

Fades a scroll container's own edges through a mask on the scrolling
element itself: each edge reads opaque once scroll reaches it and feathers
while content lies beyond. Without scroll timelines both edges stay faded.

## Signature

```ts
scrollFade<node extends Element = Element>(options?: ScrollFade.Options): UtilityMixin<node>
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `ScrollFade.Options` | Selects the scroll axis the fade tracks and how wide each faded band reads. |

## Examples

```tsx
<MessageScroller.Viewport mix={scrollFade({ axis: "block" })}>
	{messages}
</MessageScroller.Viewport>
```

```tsx
<Attachment.Group mix={scrollFade({ axis: "inline", size: "2rem" })}>
	{attachments}
</Attachment.Group>
```

## Used with it

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

### ScrollFade.Options

Options tuning which edges a scroll container's own mask-driven fade
tracks and how wide each faded band reads.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `axis?` | `"block" \| "inline"` | Scroll axis the fade's timeline attaches to: `"block"` fades the top and bottom edges of a vertically scrolling list, `"inline"` the start and end edges of a horizontally scrolling row. Defaults to `"block"`. |
| `size?` | `string` | CSS length each faded band extends inward from its edge. Defaults to `"3rem"`. |