diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs index 91b8e2f74c28..c35aa6e8471c 100644 --- a/scroll-animations-1/Overview.bs +++ b/scroll-animations-1/Overview.bs @@ -136,7 +136,7 @@ spec: cssom-view-1; type: dfn; [=Scroll progress timelines=] can be referenced in 'animation-timeline' anonymously using the ''scroll()'' [=functional notation=] - or by name (see [[#timeline-scope]]) + or by name (see [[#timeline-scoping]]) after declaring them using the 'scroll-timeline' properties. In the Web Animations API, they can be represented anonymously by a {{ScrollTimeline}} object. @@ -323,7 +323,7 @@ spec: cssom-view-1; type: dfn; [=Scroll progress timelines=] can also be defined on the [=scroll container=] itself, and then referenced by name by elements within the name’s scope - (see [[#timeline-scope]]). + (see [[#timeline-scoping]]). Such named scroll progress timelines are declared in the [=coordinated value list=] @@ -332,20 +332,6 @@ spec: cssom-view-1; type: dfn; with 'scroll-timeline-name' as the [=coordinating list base property=]. See [[css-values-4#linked-properties]]. - Depending on its name attachment - ('scroll-timeline-attachment'), - a name specified by 'scroll-timeline-name' - can be attached to a [=scroll progress timeline=] defined on the element’s own box - (''scroll-timeline-attachment/local''), - declared for the element’s scope but deferred - to a descendant [=scroll container=]’s [=scroll progress timeline=] - (''scroll-timeline-attachment/defer''), - or used to attach the element’s [=scroll progress timeline=] - to a name declared and deferred by an ancestor - (''scroll-timeline-attachment/ancestor''), - effectively allowing its [[#timeline-scope|scope]] to expand - beyond this element and its descendants. - ### Naming a Scroll Progress Timeline: the 'scroll-timeline-name' property ### {#scroll-timeline-name}
@@ -360,10 +346,6 @@ spec: cssom-view-1; type: dfn;
Specifies names for the [=named scroll progress timelines=]
associated with this element.
- Depending on the name’s [=attachment=] ('view-timeline-attachment'),
- this element can declare a name,
- define its [=scroll progress timeline=],
- or both (the default).
### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
@@ -385,78 +367,18 @@ spec: cssom-view-1; type: dfn;
Values are as defined for ''scroll()''.
- Note: This property has no effect when combined
- with a 'scroll-timeline-attachment' of ''scroll-timeline-attachment/defer''.
-
-### Attachment of a Scroll Progress Timeline: the 'scroll-timeline-attachment' property ### {#scroll-timeline-attachment}
-
-
- Name: scroll-timeline-attachment
- Value: [ local | defer | ancestor ]#
- Initial: local
- Applies to: all elements
- Inherited: no
- Computed value: a list of the keywords specified
- Animation type: not animatable
-
-
- Specifies the [=name attachment=]
- of each [=scroll progress timeline=] name
- specified by 'scroll-timeline-name'.
-
- Values have the following meanings:
-
- Name: scroll-timeline - Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]# + Value: [ <<'scroll-timeline-name'>> <<'scroll-timeline-axis'>>? ]# Applies to: all elements Inherited: no Animation type: not animatableThis property is a [=shorthand=] for setting - 'scroll-timeline-name', 'scroll-timeline-axis', and 'scroll-timeline-attachment' + 'scroll-timeline-name' and 'scroll-timeline-axis' in a single declaration. # View Progress Timelines # {#view-timelines} @@ -484,7 +406,7 @@ spec: cssom-view-1; type: dfn; [=View progress timelines=] can be referenced anonymously using the ''view()'' [=functional notation=] - or by name (see [[#timeline-scope]]) + or by name (see [[#timeline-scoping]]) after declaring them using the 'view-timeline' properties on the [=view progress subject=]. In the Web Animations API, @@ -736,7 +658,7 @@ spec: cssom-view-1; type: dfn; [=View progress timelines=] can also be defined declaratively and then referenced by name by elements within the name’s scope - (see [[#timeline-scope]]). + (see [[#timeline-scoping]]). Such named view progress timelines are declared in the [=coordinated value list=] @@ -745,14 +667,6 @@ spec: cssom-view-1; type: dfn; with 'view-timeline-name' as the [=coordinating list base property=]. See [[css-values-4#linked-properties]]. - [[#scroll-timelines-named|As for named scroll progress timelines]], - [=named view progress timelines=] can have various [=name attachments=], - allowing a name specified by 'view-timeline-name' - to be attached to the box’s own [=view progress timeline=], - deferring it to a descendant box’s [=view progress timeline=], - or connecting the box’s [=view progress timeline=] - to the scope of an ancestor. - ### Naming a View Progress Timeline: the 'view-timeline-name' property ### {#view-timeline-name}
@@ -767,10 +681,6 @@ spec: cssom-view-1; type: dfn;
Specifies names for the [=named view progress timelines=]
associated with this element.
- Depending on the name’s [=attachment=] ('view-timeline-attachment'),
- this element can declare a name,
- define its [=view progress timeline=],
- or both (the default).
### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
@@ -789,9 +699,6 @@ spec: cssom-view-1; type: dfn;
Values are as defined for ''view()''.
- Note: This property has no effect when combined
- with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
### Inset of a View Progress Timeline: the 'view-timeline-inset' property ### {#view-timeline-inset}
@@ -825,74 +732,16 @@ spec: cssom-view-1; type: dfn;
defines an inward offset from the corresponding edge of the scrollport.
- Note: This property has no effect when combined
- with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
-### Attachment of a View Progress Timeline: the 'view-timeline-attachment' property ### {#view-timeline-attachment}
-
-
- Name: view-timeline-attachment
- Value: [ local | defer | ancestor ]#
- Initial: local
- Applies to: all elements
- Inherited: no
- Computed value: a list of the keywords specified
- Animation type: not animatable
-
-
- Specifies the [=name attachment=]
- of each [=view progress timeline=] name
- specified by 'view-timeline-name'.
-
- Values have the following meanings:
-
- Name: view-timeline - Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]# + Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]# Applies to: all elementsThis property is a [=shorthand=] for setting - 'view-timeline-name', 'view-timeline-axis', and 'view-timeline-attachment' + 'view-timeline-name' and 'view-timeline-axis' in a single declaration. It does not set 'view-timeline-inset'. @@ -951,13 +800,17 @@ spec: cssom-view-1; type: dfn; The editors would be interested in hearing about any real use cases for multiple iterations here. -## Named Timeline Scoping and Lookup ## {#timeline-scope} +## Named Timeline Scoping and Lookup ## {#timeline-scoping} A named [=scroll progress timeline=] or [=view progress timeline=] is referenceable by: * the name-declaring element itself * that element’s descendants + Note: The 'timeline-scope' property can be used + to declare the name of a timeline on an ancestor of its defining element, + effectively expanding its scope beyond that element’s subtree. + If multiple elements have declared the same timeline name, the matching timeline is the one declared on the nearest element in tree order. @@ -967,16 +820,8 @@ spec: cssom-view-1; type: dfn; take precedence, and [=scroll progress timelines=] take precedence over [=view progress timelines=]. - Note: Although only names on the ancestor chain - are visible to a timeline name lookup, - a deferred [=name attachment=] allows a name declared on an ancestor - to be attached to a timeline sourced elsewhere in its subtree, - effectively allowing lookup of a timeline sourced - from a sibling, cousin, or descendant. - See 'scroll-timeline-attachment'/'view-timeline-attachment'. -
+ Name: timeline-scope + Value: none | <+ + This property declares the scope of the specified timeline names + to extend across this element’s subtree. + This allows a named timeline + (such as a [=named scroll progress timeline=] or [=named view progress timeline=]) + to be referenced by elements outside the timeline-defining element’s subtree-- + for example, by siblings, cousins, or ancestors. + It also blocks descendant timelines with the specified names + from being referenced from outside this subtree, + and ancestor timelines with the specified names from being referenced + within this subtree. + + Values have the following meanings: + +># + Initial: none + Applies to: all elements + Inherited: no + Computed value: the keyword ''timeline-scope/none'' or a list of [=CSS identifiers=] + Animation type: not animatable +