8000 [scroll-animations-1] Replace timeline-attachment with timeline-scope… · w3c/csswg-drafts@8a8c496 · GitHub
Skip to content

Commit 8a8c496

Browse files
fantasaifantasai
committed
[scroll-animations-1] Replace timeline-attachment with timeline-scope #7759 
1 parent a1c2172 commit 8a8c496

File tree

1 file changed

+65
-181
lines changed

1 file changed

+65
-181
lines changed

‎scroll-animations-1/Overview.bs‎

Lines changed: 65 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -332,20 +332,6 @@ spec: cssom-view-1; type: dfn;
332332
with 'scroll-timeline-name' as the [=coordinating list base property=].
333333
See [[css-values-4#linked-properties]].
334334

335-
Depending on its <dfn local-lt='attachment'>name attachment</dfn>
336-
('scroll-timeline-attachment'),
337-
a name specified by 'scroll-timeline-name'
338-
can be attached to a [=scroll progress timeline=] defined on the element’s own box
339-
(''scroll-timeline-attachment/local''),
340-
declared for the element’s scope but deferred
341-
to a descendant [=scroll container=]’s [=scroll progress timeline=]
342-
(''scroll-timeline-attachment/defer''),
343-
or used to attach the element’s [=scroll progress timeline=]
344-
to a name declared and deferred by an ancestor
345-
(''scroll-timeline-attachment/ancestor''),
346-
effectively allowing its [[#timeline-scope|scope]] to expand
347-
beyond this element and its descendants.
348-
349335
### Naming a Scroll Progress Timeline: the 'scroll-timeline-name' property ### {#scroll-timeline-name}
350336

351337
<pre class='propdef'>
@@ -360,10 +346,6 @@ spec: cssom-view-1; type: dfn;
360346

361347
Specifies names for the [=named scroll progress timelines=]
362348
associated with this element.
363-
Depending on the name’s [=attachment=] ('view-timeline-attachment'),
364-
this element can declare a name,
365-
define its [=scroll progress timeline=],
366-
or both (the default).
367349

368350
### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
369351

@@ -385,78 +367,18 @@ spec: cssom-view-1; type: dfn;
385367

386368
Values are as defined for ''scroll()''.
387369

388-
Note: This property has no effect when combined
389-
with a 'scroll-timeline-attachment' of ''scroll-timeline-attachment/defer''.
390-
391-
### Attachment of a Scroll Progress Timeline: the 'scroll-timeline-attachment' property ### {#scroll-timeline-attachment}
392-
393-
<pre class='propdef'>
394-
Name: scroll-timeline-attachment
395-
Value: [ local | defer | ancestor ]#
396-
Initial: local
397-
Applies to: all elements
398-
Inherited: no
399-
Computed value: a list of the keywords specified
400-
Animation type: not animatable
401-
</pre>
402-
403-
Specifies the [=name attachment=]
404-
of each [=scroll progress timeline=] name
405-
specified by 'scroll-timeline-name'.
406-
407-
Values have the following meanings:
408-
409-
<dl dfn-type=value dfn-for=scroll-timeline-attachment>
410-
<dt><dfn>local</dfn>
411-
<dd>
412-
This [=scroll progress timeline=] name
413-
[=attaches=] to the corresponding [=scroll progress timeline=]
414-
defined on this box.
415-
416-
<dt><dfn>defer</dfn>
417-
<dd>
418-
This [=scroll progress timeline=] name’s [=attachment=]
419-
is deferred to its descendants.
420-
In other words,
421-
this element declares a [=scroll progress timeline=]’s name
422-
and defines its scope (see [[#timeline-scope]]),
423-
but defers the timeline’s definition
424-
([=scroll container=] source and axis)
425-
to its descendants.
426-
427-
If more than one matching descendant [=scroll progress timeline=] exists,
428-
or if no such timeline exists,
429-
then the timeline name has no [=attachment=],
430-
and represents an [=inactive timeline=].
431-
432-
ISSUE: Should it instead be ignored (be invisible to lookup)?
433-
(This might make it harder to implement.)
434-
If multiple, should it attach instead to the last declared timeline (in tree order)
435-
rather than invalidating the attachment?
436-
437-
<dt><dfn>ancestor</dfn>
438-
<dd>
439-
This [=scroll progress timeline=] definition,
440-
attaches to the closest matching [=scroll progress timeline=] name
441-
that was deferred (''scroll-timeline-name/defer'')
442-
by an ancestor (if any).
443-
444-
If no such ancestor exists,
445-
the [=attachment=] is treated as ''scroll-timeline-attachment/local''.
446-
</dl>
447-
448370
### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}
449371

450372
<pre class='propdef shorthand'>
451373
Name: scroll-timeline
452-
Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]#
374+
Value: [ <<'scroll-timeline-name'>> <<'scroll-timeline-axis'>>? ]#
453375
Applies to: all elements
454376
Inherited: no
455377
Animation type: not animatable
456378
</pre>
457379

458380
This property is a [=shorthand=] for setting
459-
'scroll-timeline-name', 'scroll-timeline-axis', and 'scroll-timeline-attachment'
381+
'scroll-timeline-name' and 'scroll-timeline-axis'
460382
in a single declaration.
461383

462384
# View Progress Timelines # {#view-timelines}
@@ -745,14 +667,6 @@ spec: cssom-view-1; type: dfn;
745667
with 'view-timeline-name' as the [=coordinating list base property=].
746668
See [[css-values-4#linked-properties]].
747669

748-
[[#scroll-timelines-named|As for named scroll progress timelines]],
749-
[=named view progress timelines=] can have various [=name attachments=],
750-
allowing a name specified by 'view-timeline-name'
751-
to be attached to the box’s own [=view progress timeline=],
752-
deferring it to a descendant box’s [=view progress timeline=],
753-
or connecting the box’s [=view progress timeline=]
754-
to the scope of an ancestor.
755-
756670
### Naming a View Progress Timeline: the 'view-timeline-name' property ### {#view-timeline-name}
757671

758672
<pre class='propdef'>
@@ -767,10 +681,6 @@ spec: cssom-view-1; type: dfn;
767681

768682
Specifies names for the [=named view progress timelines=]
769683
associated with this element.
770-
Depending on the name’s [=attachment=] ('view-timeline-attachment'),
771-
this element can declare a name,
772-
define its [=view progress timeline=],
773-
or both (the default).
774684

775685
### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
776686

@@ -789,9 +699,6 @@ spec: cssom-view-1; type: dfn;
789699

790700
Values are as defined for ''view()''.
791701

792-
Note: This property has no effect when combined
793-
with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
794-
795702
### Inset of a View Progress Timeline: the 'view-timeline-inset' property ### {#view-timeline-inset}
796703

797704
<pre class='propdef'>
@@ -825,74 +732,16 @@ spec: cssom-view-1; type: dfn;
825732
defines an inward offset from the corresponding edge of the scrollport.
826733
</dl>
827734

828-
Note: This property has no effect when combined
829-
with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
830-
831-
### Attachment of a View Progress Timeline: the 'view-timeline-attachment' property ### {#view-timeline-attachment}
832-
833-
<pre class='propdef'>
834-
Name: view-timeline-attachment
835-
Value: [ local | defer | ancestor ]#
836-
Initial: local
837-
Applies to: all elements
838-
Inherited: no
839-
Computed value: a list of the keywords specified
840-
Animation type: not animatable
841-
</pre>
842-
843-
Specifies the [=name attachment=]
844-
of each [=view progress timeline=] name
845-
specified by 'view-timeline-name'.
846-
847-
Values have the following meanings:
848-
849-
<dl dfn-type=value dfn-for=view-timeline-attachment>
850-
<dt><dfn>local</dfn>
851-
<dd>
852-
This [=view progress timeline=] name
853-
[=attaches=] to the corresponding [=view progress timeline=]
854-
defined on this box.
855-
856-
<dt><dfn>defer</dfn>
857-
<dd>
858-
This [=view progress timeline=] name’s [=attachment=]
859-
is deferred to its descendants.
860-
In other words,
861-
this element declares a [=view progress timeline=]’s name
862-
and defines its scope (see [[#timeline-scope]]),
863-
but defers the timeline’s definition
864-
([=view progress subject|subject=],
865-
[=scroll container=] source,
866-
axis, and
867-
[=view progress visibility range|visibility range=])
868-
to its descendants.
869-
870-
If more than one matching descendant [=view progress timeline=] exists,
871-
or if no such timeline exists,
872-
then this timeline name has no [=attachment=],
873-
and represents an [=inactive timeline=].
874-
875-
<dt><dfn>ancestor</dfn>
876-
<dd>
877-
This [=view progress timeline=] definition
878-
[=attaches=] to the closest matching [=view progress timeline=] name
879-
that was deferred (''view-timeline-name/defer'')
880-
by an ancestor (if any).
881-
882-
If no such ancestor exists,
883-
the [=attachment=] is treated as ''view-timeline-attachment/local''.
884-
</dl>
885-
886735
### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
887736

888737
<pre class='propdef shorthand'>
889738
Name: view-timeline
890-
Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
739+
Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]#
891740
Applies to: all elements
892741
</pre>
893742

894743
This property is a [=shorthand=] for setting
895-
'view-timeline-name', 'view-timeline-axis', and 'view-timeline-attachment'
744+
'view-timeline-name' and 'view-timeline-axis'
896745
in a single declaration.
897746
It does not set 'view-timeline-inset'.
898747

@@ -958,6 +807,10 @@ spec: cssom-view-1; type: dfn;
958807
* the name-declaring element itself
959808
* that element’s descendants
960809

810+
Note: The 'timeline-scope' property can be used
811+
to declare the name of a timeline on an ancestor of its defining element,
812+
effectively expanding its scope beyond that element’s subtree.
813+
961814
If multiple elements have declared the same timeline name,
962815
the matching timeline is the one declared
963816
on the nearest element in tree order.
@@ -967,16 +820,8 @@ spec: cssom-view-1; type: dfn;
967820
take precedence, and
968821
[=scroll progress timelines=] take precedence over [=view progress timelines=].
969822

970-
Note: Although only names on the ancestor chain
971-
are visible to a timeline name lookup,
972-
a deferred [=name attachment=] allows a name declared on an ancestor
973-
to be attached to a timeline sourced elsewhere in its subtree,
974-
effectively allowing lookup of a timeline sourced
975-
from a sibling, cousin, or descendant.
976-
See 81BB 'scroll-timeline-attachment'/'view-timeline-attachment'.
977-
978823
<div class=example>
979-
Using ''scroll-timeline-attachment: defer'',
824+
Using ''timeline-scope'',
980825
an element can refer to timelines
981826
bound to elements that are siblings, cousins, or even descendants.
982827
For example, the following creates an animation on an element
@@ -991,16 +836,19 @@ spec: cssom-view-1; type: dfn;
991836
}
992837

993838
.root {
994-
scroll-timeline: scroller defer;
839+
/* declares the scope of a 'scroller' timeline to reach all descendants */
840+
timeline-scope: scroller;
995841
}
996842

997843
.root .animation {
998844
animation: anim;
845+
/* references the 'scroller' timeline for driving the progress of 'anim' */
999846
animation-timeline: scroller;
1000847
}
1001848

1002849
.root .animation + .scroller {
1003-
scroll-timeline: scroller ancestor;
850+
/* attaches a scroll progress timeline to the timeline name 'scroller' */
851+
scroll-timeline: scroller;
1004852
}
1005853
</style>
1006854
&hellip;
@@ -1011,13 +859,6 @@ spec: cssom-view-1; type: dfn;
1011859
</xmp>
1012860
</div>
1013861

1014-
If a timeline name has been declared,
1015-
but does not have a usable [=attachment=]
1016-
(e.g. if it is declared with ''scroll-timeline-name/defer'',
1017-
but no [=scroll progress timeline=] or [=view progress timeline=]
1018-
is [=attachment|attached=] to it),
1019-
it refers to an [=inactive timeline=].
1020-
1021862
## Animation Events ## {#events}
1022863

1023864
[=Scroll-driven animations=] dispatch all the same animation events
@@ -1108,7 +949,7 @@ spec: cssom-view-1; type: dfn;
1108949

1109950
ISSUE: This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.
1110951

1111-
This specification introduces the concepts of [=named timeline ranges=]
952+
This appendix introduces the concepts of [=named timeline ranges=]
1112953
and [=animation attachment ranges=]
1113954
to <a href="https://www.w3.org/TR/css-animations/">CSS Animations</a>
1114955
and <a href="https://www.w3.org/TR/web-animations/">Web Animations</a>.
@@ -1396,15 +1237,58 @@ spec: cssom-view-1; type: dfn;
13961237
should it return percentage progress through that range,
13971238
or time progress through that range?
13981239

1240+
# Appendix B: Timeline Scope # {#timeline-scoping}
1241+
1242+
ISSUE: This section should move to CSS-ANIMATIONS-2.
1243+
1244+
This appendix introduces the 'timeline-scope' property,
1245+
which allows declaring a timeline name’s scope on an ancestor
1246+
of the timeline’s defining element.
1247+
1248+
# Declaring a Named Timeline’s Scope: the 'timeline-scope' property ### {#timeline-scope}
1249+
1250+
<pre class="propdef">
1251+
Name: timeline-scope
1252+
Value: none | <<custom-ident>>#
1253+
Initial: none
1254+
Applies to: all elements
1255+
Inherited: no
1256+
Computed value: the keyword ''timeline-scope/none'' or a list of [=CSS identifiers=]
1257+
Animation type: not animatable
1258+
</pre>
1259+
1260+
This property declares the scope of the specified timeline names,
1261+
allowing a named timeline
1262+
(such as a [=named scroll progress timeline=] or [=named view progress timeline=])
1263+
to be referenced by elements outside the timeline-defining element’s subtree--
1264+
for example, by siblings, cousins, or ancestors.
1265+
1266+
Values have the following meanings:
1267+
1268+
<dl dfn-for="timeline-scope" dfn-type=value>
1269+
<dt><dfn>none</dfn>
1270+
<dd>
1271+
No change in name timeline scope.
1272+
1273+
<dt><dfn><<custom-ident>></dfn>
1274+
<dd>
1275+
Declares the name of a matching named timeline defined by a descendant
1276+
to be in scope for this element and its descendants.
1277+
1278+
If no such timeline exists,
1279+
or if 16A6 more than one such timeline exists,
1280+
declares an [=inactive timeline=] with the specified name.
1281+
1282+
Note: This property has no effect if a matching named timeline
1283+
is defined by this e 8096 lement itself.
1284+
</dl>
1285+
13991286
# Changes # {#changes}
14001287

14011288
Changes since the previous
1402-
(<a href="https://www.w3.org/TR/2023/WD-scroll-animations-1-20230406/">6 April 2023</a>)
1289+
(<a href="https://www.w3.org/TR/2023/WD-scroll-animations-1-20230428/">28 April 2023</a>)
14031290
Working Draft include:
14041291

1405-
* Adding 'scroll-timeline-attachment' and 'view-timeline-attachment'.
1406-
(<a href="https://github.com/w3c/csswg-drafts/issues/7759">Issue 7759</a>)
1407-
* Switching ''getCurrentTime()'' to take a dictionary of options.
1408-
(<a href="https://github.com/w3c/csswg-drafts/issues/8201">Issue 8201</a>)
1409-
* Clarified how view timeline ranges are calculated with ''position: sticky''.
1410-
(<a href="https://github.com/w3c/csswg-drafts/issues/8298">Issue 8298</a>)
1292+
* Removed <css>scroll-timeline-attachment</css> and <css>view-timeline-attachment</css> in favor of 'timeline-scope'.
1293+
1294+
See also <a href="https://www.w3.org/TR/2023/WD-scroll-animations-1-20230428/#changes">Earlier Changes</a>.

0 commit comments

Comments
 (0)