[ @sdxc/u/animation ]

scroll-timeline-name

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

Paragraph 1. Scroll this box to drive the timeline.

Paragraph 2. Scroll this box to drive the timeline.

Paragraph 3. Scroll this box to drive the timeline.

Paragraph 4. Scroll this box to drive the timeline.

Paragraph 5. Scroll this box to drive the timeline.

Paragraph 6. Scroll this box to drive the timeline.

Paragraph 7. Scroll this box to drive the timeline.

Paragraph 8. Scroll this box to drive the timeline.

<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:

scroll →

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

<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.

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

Responsive design

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

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

Signature

u.scrollTimelineName(name: string)