diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs index 7321c000a2bc..cd7879ca811c 100644 --- a/scroll-animations-1/Overview.bs +++ b/scroll-animations-1/Overview.bs @@ -534,9 +534,6 @@ spec:selectors-4; type:dfn; text:selector Specifies names for the [=named scroll progress timelines=] associated with this element. - Makes this element a [=weak timeline scope=] - for the specified names. - ### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
@@ -983,9 +980,6 @@ spec:selectors-4; type:dfn; text:selector
Specifies names for the [=named view progress timelines=]
associated with this element.
- Makes this element a [=weak timeline scope=]
- for the specified names.
-
### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
@@ -1102,16 +1096,19 @@ spec:selectors-4; type:dfn; text:selector
any real use cases for multiple iterations here.
## Named Timeline Scoping and Lookup ## {#timeline-scoping}
-
- Named [=scroll progress timelines=] and [=view progress timelines=]
- are referenceable within the subtree of a [=timeline scope=],
- with the [=document element=] itself acting as an implicit default scope.
- When there are multiple competing definitions
- for the same name within the subtree of a [=timeline scope=],
- the definition provided by the last element in [=flat tree=] order
- takes precedence.
+ 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.
In case of a name conflict on the same element,
names declared later in the naming property
('scroll-timeline-name', 'view-timeline-name')
@@ -1119,69 +1116,42 @@ spec:selectors-4; type:dfn; text:selector
[=scroll progress timelines=] take precedence over [=view progress timelines=].
- Say you have multiple instances of a component,
- each defining a timeline
- and some element using that timeline:
-
- ```html
-
-
-
-
-
-
-
-
-
-
- ```
-
- The problem with this is that multiple definitions of `--v`
- exist in the same [=timeline scope=];
- both instances of `animation-timeline:--v`
- find the *same* timeline,
- i.e. the last one seen in [=flat tree=] order.
-
- We can fix this by making the component elements [=timeline scopes=]
- for `--v`:
-
- ```html
+ 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
+ that is linked to a [=scroll progress timeline=]
+ defined by the subsequent sibling.
+
+
- ```
-
- Now, any lookup of `--v` taking place within a component
- will only see timelines defined by the component.
-
-
-
-
- Within a [=timeline scope=],
- a named timeline can be referenced from any element in the same scope,
- either before or after the timeline-providing element in tree-order.
-
- ```html
-
-
-
-
-
- ```
+ @keyframes anim {
+ from { color: red; }
+ to { color: green; }
+ }
- In the above example,
- both instances of `animation-timeline:--t` find the same [=scroll progress timeline=]
- named `--t`.
+ .root {
+ /* declares the scope of a '--scroller' timeline to reach all descendants */
+ timeline-scope: --scroller;
+ }
- You can also reach `--t` from the timeline-providing element itself,
- though this lookup would technically take place
- in a separate [=weak timeline scope=]:
+ .root .animation {
+ animation: anim;
+ /* references the '--scroller' timeline for driving the progress of 'anim' */
+ animation-timeline: --scroller;
+ }
- ```html
-
- ```
+ .root .animation + .scroller {
+ /* attaches a scroll progress timeline to the timeline named '--scroller' */
+ scroll-timeline: --scroller;
+ }
+
+ …
+
+ Animating Box
+ Scrollable Box
+
+
## Animation Events ## {#events}
@@ -1695,11 +1665,7 @@ spec:selectors-4; type:dfn; text:selector
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-property}
-
- The 'timeline-scope' property
- makes an element a [=strong timeline scope=]
- for the specified timeline names.
+## Declaring a Named Timeline’s Scope: the 'timeline-scope' property ## {#timeline-scope}
Name: timeline-scope
@@ -1707,111 +1673,50 @@ spec:selectors-4; type:dfn; text:selector
Initial: none
Applies to: all elements
Inherited: no
- Computed value: the keyword ''timeline-scope/none'',
- the keyword ''timeline-scope/all'',
- or a list of [=CSS identifiers=]
+ 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.
+
+ ISSUE(8915): There's some open discussion about these blocking effects.
+
Values have the following meanings: