# view-timeline-name

> Applies `view-timeline-name` to the element being *watched* — the card, the section, the image.

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

Applies `view-timeline-name` to the element being *watched* — the card, the
section, the image. 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.viewTimelineName("reveal")` | `css({ viewTimelineName: "--reveal" })` |
| `u.viewTimelineName("hero-image")` | `css({ viewTimelineName: "--hero-image" })` |

## Examples

### Basic example

Use `viewTimelineName()` on the element being watched, then animate it or a descendant on `timeline: "--name"`. Scroll the box to bring each card in:

```tsx
<div mix={[scroll("y"), bs(64), ...]}>
	<div mix={[...]}>
		{["One", "Two", "Three", "Four", "Five", "Six"].map((label) => (
			<div mix={[viewTimelineName("card"), hstack({ justify: "between" }), ...]}>
				Card {label}
				<span
					mix={[
						animation("slide-in", {
							keyframes: {
								from: { opacity: 0, translate: "3rem 0" },
								to: { opacity: 1, translate: "0 0" },
							},
							duration: "auto",
							easing: "ease-out",
							fillMode: "both",
							timeline: "--card",
							range: "entry 25% cover 50%",
						}),
						...,
					]}
				>
					New
				</span>
			</div>
		))}
	</div>
</div>
```

### Picking a range

Set `range` to run only part of the timeline, like `"exit"` while the watched element leaves the scroll box. Scroll down to fade each card out:

```tsx
<div mix={[scroll("y"), bs(64), ...]}>
	<div mix={[...]}>
		{["One", "Two", "Three", "Four", "Five", "Six"].map((label) => (
			<div mix={[viewTimelineName("card"), ...]}>
				<p
					mix={[
						animation("fade-out", {
							keyframes: { from: { opacity: 1 }, to: { opacity: 0 } },
							duration: "auto",
							easing: "linear",
							fillMode: "both",
							timeline: "--card",
							range: "exit",
						}),
					]}
				>
					Card {label}
				</p>
			</div>
		))}
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.viewTimelineName("reveal"))
```

## Responsive design

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

```ts
u.at("md", u.viewTimelineName("reveal"))
```

## Signature

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