Skip to content

[scroll-animations-1] Remove -attachment, add timeline-scope #8902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[scroll-animations-1] Remove -attachment, add timeline-scope #8902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 65 additions & 177 deletions scroll-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-name-scope]])
after declaring them using the 'scroll-timeline' properties.
In the Web Animations API,
they can be represented anonymously by a {{ScrollTimeline}} object.
Expand Down Expand Up @@ -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-name-scope]]).

Such <dfn>named scroll progress timelines</dfn>
are declared in the [=coordinated value list=]
Expand All @@ -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 <dfn local-lt='attachment'>name attachment</dfn>
('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}

<pre class='propdef'>
Expand All @@ -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}

Expand All @@ -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}

<pre class='propdef'>
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
</pre>

Specifies the [=name attachment=]
of each [=scroll progress timeline=] name
specified by 'scroll-timeline-name'.

Values have the following meanings:

<dl dfn-type=value dfn-for=scroll-timeline-attachment>
<dt><dfn>local</dfn>
<dd>
This [=scroll progress timeline=] name
[=attaches=] to the corresponding [=scroll progress timeline=]
defined on this box.

<dt><dfn>defer</dfn>
<dd>
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?

<dt><dfn>ancestor</dfn>
<dd>
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''.
</dl>

### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}

<pre class='propdef shorthand'>
Name: scroll-timeline
Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]#
Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> ]? ]#
Comment on lines -452 to +374
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to remove the now-extraneous brackets.

Applies to: all elements
Inherited: no
Animation type: not animatable
</pre>

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}
Expand Down Expand Up @@ -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-name-scope]])
after declaring them using the 'view-timeline' properties
on the [=view progress subject=].
In the Web Animations API,
Expand Down Expand Up @@ -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-name-scope]]).

Such <dfn>named view progress timelines</dfn>
are declared in the [=coordinated value list=]
Expand All @@ -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}

<pre class='propdef'>
Expand All @@ -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}

Expand All @@ -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}

<pre class='propdef'>
Expand Down Expand Up @@ -825,78 +732,66 @@ spec: cssom-view-1; type: dfn;
defines an inward offset from the corresponding edge of the scrollport.
</dl>

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}
### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}

<pre class='propdef'>
Name: view-timeline-attachment
Value: [ local | defer | ancestor ]#
Initial: local
<pre class='propdef shorthand'>
Name: view-timeline
Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> ]? ]#
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here: don't need the brackets anymore.

Applies to: all elements
Inherited: no
Computed value: a list of the keywords specified
Animation type: not animatable
</pre>

Specifies the [=name attachment=]
of each [=view progress timeline=] name
specified by 'view-timeline-name'.
This property is a [=shorthand=] for setting
'view-timeline-name' and 'view-timeline-axis'
in a single declaration.
It does not set 'view-timeline-inset'.

Values have the following meanings:
ISSUE: Should it reset 'view-timeline-inset' also?

<dl dfn-type=value dfn-for=view-timeline-attachment>
<dt><dfn>local</dfn>
<dd>
This [=view progress timeline=] name
[=attaches=] to the corresponding [=view progress timeline=]
defined on this box.
# Deferred Progress Timelines # {#deferred-timeline}
Copy link
Collaborator

@fantasai fantasai Jun 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same top-level comment as earlier: I think I'd prefer to cast this as a name-scoping mechanism.

Also, this ultimately needs to go into css-animations-2, not here. Might make sense for us to just draft it there, or at least in the Appendix in a way that's prepared to be moved over.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm not actively trying to annoy you by going in circles. I was a definitely unsure what to do here, since the issue notes appear to show an unresolved situation where everyone except you resolved on this model #7759 (comment) 🙃. But after conferring with Tab, they thought writing that model would be fine despite that.

Copy link
Collaborator

@fantasai fantasai Jun 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the version in #8906 is functionally saying the same thing, just describing it differently. At least it's trying to ...


<dt><dfn>defer</dfn>
<dd>
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=].

<dt><dfn>ancestor</dfn>
<dd>
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).
<dfn export>Deferred progress timelines</dfn> are timelines linked to the progress
of another timeline found among the descendant elements.
This effectively allows a [=scroll progress timeline=] or [=view progress timeline=]
defined on a given element
to expand its [[#timeline-scope|scope]] beyond that element and its descendants.

If no such ancestor exists,
the [=attachment=] is treated as ''view-timeline-attachment/local''.
</dl>
[=Deferred progress timelines=] can be referenced in 'animation-timeline'
by name (see [[#timeline-name-scope]])
after declaring them using the 'timeline-scope' property.

### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
## Deferred Progress Timeline Ranges ## {#deferred-timelines-ranges}

<pre class='propdef shorthand'>
Name: view-timeline
Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
A [=deferred progress timeline=] defines the same [=named timeline ranges=]
its [=attached timeline=] defines.

## Calculating Progress for a Deferred Progress Timeline ## {#deferred-timeline-progress}

Progress (the [=timeline/current time=]) for a [=deferred progress timeline=]
is the progress of its [=attached timeline=].
If there is no [=attached timeline=],
the timeline is [=inactive timeline|inactive=].

The <dfn export>attached timeline</dfn> of a [=deferred progress timeline=]
is the [=named scroll progress timeline=] or [=named view progress timeline=]
among the inclusive flat-tree descendants
with a matching name.
If more than one matching timeline exists,
or if no such timeline exists,
then the deferred timeline has no [=attached timeline=].

## Naming a Deferred Progress Timeline: the 'timeline-scope' property ## {#timeline-scope}

<pre class='propdef'>
Name: timeline-scope
Value: none | [ <<dashed-ident>> ]#
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is partially mixing up the dashed-ident change into the timeline-scope change, which leaves the spec in a weird inconsistent state.

Initial: none
Applies to: all elements
Inherited: no
Computed value: the keyword ''timeline-scope/none'' or a list of <<dashed-ident>>s
Animation type: not animatable
</pre>

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

ISSUE: Should it reset 'view-timeline-inset' also?
Specifies names for the [=deferred progress timelines=] associated with this element.

# Attaching Animations to [=Scroll-driven Timelines=] # {#scroll-driven-attachment}

Expand Down Expand Up @@ -951,9 +846,9 @@ 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-name-scope}

A named [=scroll progress timeline=] or [=view progress timeline=]
A named [=scroll progress timeline=], [=view progress timeline=], or [=deferred progress timeline=]
is referenceable by:
* the name-declaring element itself
* that element’s descendants
Expand All @@ -963,20 +858,20 @@ spec: cssom-view-1; type: dfn;
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')
take precedence, and
[=scroll progress timelines=] take precedence over [=view progress timelines=].
('scroll-timeline-name', 'view-timeline-name', 'timeline-scope')
take precedence,
[=scroll progress timelines=] take precedence over [=view progress timelines=],
and [=view progress timelines=] take precedence over [=deferred 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
a [=deferred progress timeline=] allows a timeline 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'.

<div class=example>
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
Expand All @@ -991,16 +886,16 @@ spec: cssom-view-1; type: dfn;
}

.root {
scroll-timeline: scroller defer;
timeline-scope: --scroller;
}

.root .animation {
animation: anim;
animation-timeline: scroller;
animation-timeline: --scroller;
}

.root .animation + .scroller {
scroll-timeline: scroller ancestor;
scroll-timeline: --scroller ancestor;
}
</style>
&hellip;
Expand All @@ -1011,13 +906,6 @@ spec: cssom-view-1; type: dfn;
</xmp>
</div>

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
Expand Down Expand Up @@ -1402,7 +1290,7 @@ spec: cssom-view-1; type: dfn;
(<a href="https://www.w3.org/TR/2023/WD-scroll-animations-1-20230406/">6 April 2023</a>)
Working Draft include:

* Adding 'scroll-timeline-attachment' and 'view-timeline-attachment'.
* Adding 'timeline-scope'
(<a href="https://github.com/w3c/csswg-drafts/issues/7759">Issue 7759</a>)
* Switching ''getCurrentTime()'' to take a dictionary of options.
(<a href="https://github.com/w3c/csswg-drafts/issues/8201">Issue 8201</a>)
Expand Down
Loading