[ameerf-wix]

Problem

generate() declares a viewProgress interaction's view-timeline on its source, and the effect's animation-timeline references it by name. A named view-timeline only resolves for the declaring element and its descendants, so when the effect targets a different element (e.g. a sibling), the CSS animation gets a null timeline.

With duration: auto and no timeline, the animation jumps straight to its after phase (finished, progress 1):

• fill: backwards effects (in) do nothing
• fill: forwards effects (out) freeze at their last keyframe; for shuttersScroll out that's a fully-clipped polygon, so the element never appears (reported in Chrome and Safari, debugged in Chrome)

Verified on an affected site: adding timeline-scope on the common ancestor attaches the animations to the source's ViewTimeline and they scrub correctly.

Fix

Collect the trigger timelines of viewProgress interactions that have at least one target other than the source, and emit:

:root {
  timeline-scope: --trigger-1, --trigger-2;
}

Timelines that only animate their source aren't scoped. An element that declares the name itself still resolves to its own timeline before reaching the scope.

_generate() returns it as timelineScopeRule; generate() appends it after the lists rule.

Note

A scoped name resolves to an inactive timeline if more than one element declares it. That only happens when a cross-element source key matches several elements, which is ambiguous anyway.

Tests

• Scopes the timelines of cross-element effects and sequences, but not the ones that only animate their source
• Emits nothing when every timeline animates only its source

🤖 Generated with Claude Code