[ @sdxc/u/animation ]

view-timeline-name

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

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

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

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:

Card OneNew

Card TwoNew

Card ThreeNew

Card FourNew

Card FiveNew

Card SixNew

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

Card One

Card Two

Card Three

Card Four

Card Five

Card Six

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

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

Responsive design

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

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

Signature

u.viewTimelineName(name: string)