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: - -
-
local -
- This [=scroll progress timeline=] name - [=attaches=] to the corresponding [=scroll progress timeline=] - defined on this box. - -
defer -
- This [=scroll progress timeline=] name’s [=attachment=] - is deferred to its descendants. - In other words, - this element declares a [=scroll progress timeline=]’s name - and defines its scope (see [[#timeline-scope]]), - but defers the timeline’s definition - ([=scroll container=] source and axis) - to its descendants. - - If more than one matching descendant [=scroll progress timeline=] exists, - or if no such timeline exists, - then the timeline name has no [=attachment=], - and represents an [=inactive timeline=]. - - ISSUE: Should it instead be ignored (be invisible to lookup)? - (This might make it harder to implement.) - If multiple, should it attach instead to the last declared timeline (in tree order) - rather than invalidating the attachment? - -
ancestor -
- This [=scroll progress timeline=] definition, - attaches to the closest matching [=scroll progress timeline=] name - that was deferred (''scroll-timeline-name/defer'') - by an ancestor (if any). - - If no such ancestor exists, - the [=attachment=] is treated as ''scroll-timeline-attachment/local''. -
- ### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}
 	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 animatable
 	
This 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: - -
-
local -
- This [=view progress timeline=] name - [=attaches=] to the corresponding [=view progress timeline=] - defined on this box. - -
defer -
- This [=view progress timeline=] name’s [=attachment=] - is deferred to its descendants. - In other words, - this element declares a [=view progress timeline=]’s name - and defines its scope (see [[#timeline-scope]]), - but defers the timeline’s definition - ([=view progress subject|subject=], - [=scroll container=] source, - axis, and - [=view progress visibility range|visibility range=]) - to its descendants. - - If more than one matching descendant [=view progress timeline=] exists, - or if no such timeline exists, - then this timeline name has no [=attachment=], - and represents an [=inactive timeline=]. - -
ancestor -
- This [=view progress timeline=] definition - [=attaches=] to the closest matching [=view progress timeline=] name - that was deferred (''view-timeline-name/defer'') - by an ancestor (if any). - - If no such ancestor exists, - the [=attachment=] is treated as ''view-timeline-attachment/local''. -
- ### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
 	Name: view-timeline
-	Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
+	Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]#
 	Applies to: all elements
 	
This 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'. -
- Using ''scroll-timeline-attachment: defer'', + Using ''timeline-scope'', an element can refer to timelines bound to elements that are siblings, cousins, or even descendants. For example, the following creates an animation on an element @@ -991,16 +836,19 @@ spec: cssom-view-1; type: dfn; } .root { - scroll-timeline: scroller defer; + /* declares the scope of a 'scroller' timeline to reach all descendants */ + timeline-scope: scroller; } .root .animation { animation: anim; + /* references the 'scroller' timeline for driving the progress of 'anim' */ animation-timeline: scroller; } .root .animation + .scroller { - scroll-timeline: scroller ancestor; + /* attaches a scroll progress timeline to the timeline name 'scroller' */ + scroll-timeline: scroller; } … @@ -1011,13 +859,6 @@ spec: cssom-view-1; type: dfn;
- If a timeline name has been declared, - but does not have a usable [=attachment=] - (e.g. if it is declared with ''scroll-timeline-name/defer'', - but no [=scroll progress timeline=] or [=view progress timeline=] - is [=attachment|attached=] to it), - it refers to an [=inactive timeline=]. - ## Animation Events ## {#events} [=Scroll-driven animations=] dispatch all the same animation events @@ -1081,9 +922,10 @@ spec: cssom-view-1; type: dfn; through those APIs. If the final style and layout update - would result in a change of time for any [=scroll progress timelines=] or - [=view progress timelines=], they will not be re-sampled to reflect the - new offset until the next update of the rendering. + would result in a change in the time or scope (see 'timeline-scope') + of any [=scroll progress timelines=] or [=view progress timelines=], + they will not be re-sampled to reflect the new state + until the next update of the rendering. Nothing in this section is intended to require that scrolling block on layout or script. @@ -1108,7 +950,7 @@ spec: cssom-view-1; type: dfn; ISSUE: This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2. - This specification introduces the concepts of [=named timeline ranges=] + This appendix introduces the concepts of [=named timeline ranges=] and [=animation attachment ranges=] to CSS Animations and Web Animations. @@ -1399,15 +1241,65 @@ spec: cssom-view-1; type: dfn; should it return percentage progress through that range, or time progress through that range? +# Appendix B: Timeline Name Scope # {#timeline-name-scope} + + ISSUE: This section should move to CSS-ANIMATIONS-2. + + This appendix introduces the 'timeline-scope' property, + which allows declaring a timeline name’s scope on an ancestor + of the timeline’s defining element. + +## Declaring a Named Timeline’s Scope: the 'timeline-scope' property ## {#timeline-scope} + +
+		Name: timeline-scope
+		Value: none | <>#
+		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
+	
+ + 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: + +
+
none +
+ No changes in timeline name scope. + +
<> +
+ Declares the name of a matching named timeline defined by a descendant-- + whose scope is not already explicitly declared by a descendant using 'timeline-scope'-- + to be in scope for this element and its descendants. + + If no such timeline exists, + or if more than one such timeline exists, + instead declares an [=inactive timeline=] with the specified name. +
+ + Note: This property cannot affect or invalidate any timeline name lookups + within the subtree of a descendant element that declares the same name. + See [[#timeline-scope]]. + # Changes # {#changes} Changes since the previous - (6 April 2023) + (28 April 2023) Working Draft include: - * Adding 'scroll-timeline-attachment' and 'view-timeline-attachment'. - (Issue 7759) - * Switching ''getCurrentTime()'' to take a dictionary of options. - (Issue 8201) - * Clarified how view timeline ranges are calculated with ''position: sticky''. - (Issue 8298) + * Removed scroll-timeline-attachment and view-timeline-attachment in favor of 'timeline-scope'. + + See also Earlier Changes.