# scroll-timeline-name

> Applies `scroll-timeline-name` to the scroll container itself, which needs an `overflow` value that scrolls.

```ts
import { scrollTimelineName } from "@sdxc/u/animation";
```

Applies `scroll-timeline-name` to the scroll container itself, which needs
an `overflow` value that scrolls. The leading `--` is added here, and the
animation references the literal dashed-ident: `timeline: "--{name}"`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.scrollTimelineName("page-scroll")` | `css({ scrollTimelineName: "--page-scroll" })` |
| `u.scrollTimelineName("log-scroll")` | `css({ scrollTimelineName: "--log-scroll" })` |

## Examples

### Basic example

Use `scrollTimelineName()` on a scroll container to name its scroll progress, then animate a descendant on `timeline: "--name"`. Scroll the box to fill the bar:

```tsx
<div mix={[scrollTimelineName("article"), scroll("y"), bs(48), ...]}>
	<div
		mix={[
			sticky(),
			insTop(0),
			bs(2),
			bg("brand.solid"),
			transformOrigin("left"),
			animation("progress", {
				keyframes: { from: { scale: "0 1" }, to: { scale: "1 1" } },
				duration: "auto",
				easing: "linear",
				timeline: "--article",
			}),
		]}
	/>
	<div mix={[...]}>
		{[1, 2, 3, 4, 5, 6, 7, 8].map((n) => (
			<p mix={[...]}>Paragraph {n}. Scroll this box to drive the timeline.</p>
		))}
	</div>
</div>
```

### Following the inline axis

A scroll timeline follows the block axis; set `scroll-timeline-axis` beside the name to follow a horizontal scroller. Scroll the row sideways to spin the tile:

```tsx
<div
	mix={[
		scrollTimelineName("row"),
		raw({ scrollTimelineAxis: "inline" }),
		scroll("x"),
		...,
	]}
>
	<div mix={[hstack({ gap: 4 }), is("max-content")]}>
		<div
			mix={[
				sticky(),
				insLeft(0),
				z(1),
				animation("turn", {
					keyframes: { from: { rotate: "0deg" }, to: { rotate: "360deg" } },
					duration: "auto",
					easing: "linear",
					timeline: "--row",
				}),
				...,
			]}
		>
			scroll →
		</div>
		{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((n) => (
			<div mix={[is(40), ...]}>Item {n}</div>
		))}
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.scrollTimelineName("page-scroll"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.scrollTimelineName("page-scroll"))
```

## Signature

```ts
u.scrollTimelineName(name: string)
```