Skip to content

[scroll-animations-1] Describe scroll/view-timeline-attachment #8680

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

Merged
merged 8 commits into from
Apr 21, 2023
Merged

[scroll-animations-1] Describe scroll/view-timeline-attachment #8680

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0ad0e1a
[scroll-animations-1] Describe scroll/view-timeline-attachment
andruud Apr 4, 2023
c857f21
No multiple attachments, Oxford comma, etc
andruud Apr 5, 2023
7d71af1
[scroll-animations-1] Minor clean-up of definitions / term linking.
fantasai Apr 10, 2023
78a5ad7
[scroll-animations-1] Recast timeline attachment as a name binding. #…
fantasai Apr 11, 2023
8ac6693
[scroll-animations-1] Remove scroll container requirements
andruud Apr 14, 2023
39ab738
[scroll-animations-1] Editorial improvements to name attachment
fantasai Apr 21, 2023
0f45add
[scroll-animations-1] Remove scroll container requirements, part 2
andruud Apr 21, 2023
97741bd
[scroll-animations-1] Scroll timelines are only active on scroll cont…
fantasai Apr 21, 2023
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
121 changes: 116 additions & 5 deletions scroll-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,18 +353,99 @@ spec: cssom-view-1; type: dfn;

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

The [=used value=] of 'scroll-timeline-axis'
is the axis of the timeline's [=attachment=],
or the initial value if there is no [=attachment=].

### 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 attachment behavior for each [=scroll progress timeline=]
associated with this element.

A scroll timeline has an <dfn>attachment</dfn>,
that determines which [=scroll container=] and {{ScrollTimeline/axis}} to use
when calculating the [progress of the timeline](#scroll-timeline-progress).

<dl>
<dt><dfn>'local'</dfn>
<dd>
The [=attachment=] is this timeline.

<dt><dfn>'defer'</dfn>
<dd>
The [=attachment=] is the timeline among the flat-tree descendants
that satisfies all of the following:
- The timeline has a matching 'scroll-timeline-name'.
- The timeline has [=ancestor=] attachment.
- The timeline has no intermediate [=defer|deferred=] timeline
that would capture it.

If more than one such candidate exists,
then this timeline has no [=attachment=].

<dt><dfn>'ancestor'</dfn>
<dd>
The timeline has no [=attachment=].

Timelines with [=ancestor=] attachment are treated as nameless
for the purposes of timeline lookup;
they can't be referenced by 'animation-timeline'.
</dl>

Timelines that have no [=attachment=] are [=inactive timeline|inactive=].

<div class=example>
Using a [=defer|deferred timeline=],
an element can effectively refer to timelines
that appear <em>after it</em> in tree order.
For example, the following creates an animation on <code>#target</code> that
is ultimately linked to a scroll timeline defined on the subsequent sibling.

<pre class=lang-css>
@keyframes anim {
from { color: red; }
to { color: green; }
}

#root {
scroll-timeline-name: mytimeline;
scroll-timeline-attachment: defer;
}

#root #target {
animation: anim auto;
animation-timeline: mytimeline;
}

#root #target + #scroller {
scroll-timeline-name: mytimeline;
scroll-timeline-attachment: ancestor;
}
</pre>
</div>

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

<pre class='propdef shorthand'>
Name: scroll-timeline
Value: [ <<'scroll-timeline-name'>> <<'scroll-timeline-axis'>>? ]#
Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]#
Applies to: [=scroll containers=]
Inherited: no
Animation type: not animatable
</pre>

This property is a [=shorthand=] for setting
'scroll-timeline-name' and 'scroll-timeline-axis'
'scroll-timeline-name', 'scroll-timeline-axis', and 'scroll-timeline-attachment'
in a single declaration.

# View Progress Timelines # {#view-timelines}
Expand Down Expand Up @@ -662,6 +743,10 @@ spec: cssom-view-1; type: dfn;
Specifies an axis for each named [=view progress timeline=]
associated with this [=scroll container=].

The [=used value=] of 'view-timeline-axis'
is the axis of the timeline's [=attachment=],
or the initial value if there is no [=attachment=].

### Inset of a View Progress Timeline: the 'view-timeline-inset' property ### {#view-timeline-inset}

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

The [=used value=] of 'view-timeline-inset'
is the inset of the timeline's [=attachment=],
or the initial value if there is no [=attachment=].

### Attachment of a View Progress Timeline: the 'view-timeline-attachment' property ### {#view-timeline-attachment}

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

Specifies attachment behavior for each [=view progress timeline=]
associated with this element.

The behavior of 'view-timeline-attachment'
is similar to that of 'scroll-timeline-attachment',
except that the [=attachment=] of a view timeline also determines
the <a property lt="view-timeline-inset">inset</a>
and {{ViewTimeline/subject}} to use
when calculating the [progress of the timeline](#view-timeline-progress).

### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}

<pre class='propdef shorthand'>
Name: view-timeline
Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]#
Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
Applies to: all elements
</pre>

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

Expand Down Expand Up @@ -776,7 +887,7 @@ spec: cssom-view-1; type: dfn;
In case of a name conflict on the same element,
[=scroll progress timelines=] take precedence over [=view progress timelines=].

ISSUE(7759): We plan to add functionality to expand the scope.
Note: [=defer|Deferred timelines=] effectively allow scoping beyond this.

## Animation Events ## {#events}

Expand Down