animation

timeline-scope

Applies the timeline-scope property, raising a named timeline's visibility to a common ancestor's subtree so animations outside the declaring element can resolve the name; the subtree still declares it.

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.timelineScope("page-scroll")`	`css({ timelineScope: "--page-scroll" })`
`u.timelineScope("page-scroll", "hero-reveal")`	`css({ timelineScope: "--page-scroll, --hero-reveal" })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.timelineScope("page-scroll")

Applying on a state

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

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

Responsive design

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

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

Signature

u.timelineScope(...names: string[])