Skip to content

[scroll-animations-1] Clarify how range positions are determined with sticky offsets. #8703

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 2 commits into from
Apr 20, 2023
Merged

[scroll-animations-1] Clarify how range positions are determined with sticky offsets. #8703

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abf5dd1
Clarify how range positions are determined with sticky offsets.
Apr 11, 2023
b97f8a9
Update scroll-animations-1/Overview.bs
flackr Apr 18, 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
28 changes: 15 additions & 13 deletions scroll-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,10 +413,10 @@ spec: cssom-view-1; type: dfn;
<dt><dfn>cover</dfn>
<dd>
Represents the full range of the [=view progress timeline=]:
* 0% progress represents the position at which
* 0% progress represents the latest position at which
the [=start=] [=border edge=] of the element’s [=principal box=]
coincides with the [=end=] edge of its [=view progress visibility range=].
* 100% progress represents the position at which
* 100% progress represents the earliest position at which
the [=end=] [=border edge=] of the element’s [=principal box=]
coincides with the [=start=] edge of its [=view progress visibility range=].

Expand All @@ -425,12 +425,12 @@ spec: cssom-view-1; type: dfn;
Represents the range during which the [=principal box=]
is either fully contained by, or fully covers,
its [=view progress visibility range=] within the [=scrollport=].
* 0% progress represents the earlier position at which:
* 0% progress represents the earliest position at which either:
* the [=start=] [=border edge=] of the element’s [=principal box=]
coincides with the [=start=] edge of its [=view progress visibility range=].
* the [=end=] [=border edge=] of the element’s [=principal box=]
coincides with the [=end=] edge of its [=view progress visibility range=].
* 100% progress represents the later position at which:
* 100% progress represents the latest position at which either:
* the [=start=] [=border edge=] of the element’s [=principal box=]
coincides with the [=start=] edge of its [=view progress visibility range=].
* the [=end=] [=border edge=] of the element’s [=principal box=]
Expand All @@ -454,21 +454,21 @@ spec: cssom-view-1; type: dfn;
<dd>
Represents the range during which the [=principal box=] crosses the [=end=]
[=border edge=]
* 0% progress represents the position at which
* 0% progress represents the latest position at which
the [=start=] [=border edge=] of the element’s [=principal box=]
coincides with the [=end=] edge of its [=view progress visibility range=].
* 100% progress represents the position at which
* 100% progress represents the earliest position at which
the [=end=] [=border edge=] of the element’s [=principal box=]
coincides with the [=end=] edge of its [=view progress visibility range=].

<dt><dfn>exit-crossing</dfn>
<dd>
Represents the range during which the [=principal box=] crosses the [=start=]
[=border edge=]
* 0% progress represents the position at which
* 0% progress represents the latest position at which
the [=start=] [=border edge=] of the element’s [=principal box=]
coincides with the [=start=] edge of its [=view progress visibility range=].
* 100% progress represents the position at which
* 100% progress represents the earliest position at which
the [=end=] [=border edge=] of the element’s [=principal box=]
coincides with the [=start=] edge of its [=view progress visibility range=].
</dl>
Expand All @@ -480,11 +480,13 @@ spec: cssom-view-1; type: dfn;
<a href="http://www.w3.org/TR/css-transforms/">Transforms</a> are ignored,
but [=relative positioning|relative=] and [=absolute positioning|absolute=] positioning
are accounted for.
For [=sticky-positioned boxes=],
the box’s [=startmost=] offset position
is used when identifying 0% progress,
and the box’s [=endmost=] offset position
is used when identifying 100% progress.

Note: For [=sticky-positioned boxes=]
the 0% and 100% progress conditions can sometimes be satisfied
by a range of scroll positions rather than just one.
Each range therefore indicates whether to use
the earliest or latest qualifying position.

[[CSS-POSITION-3]] [[CSS-TRANSFORMS-1]]

## Calculating Progress for a View Progress Timeline ## {#view-timeline-progress}
Expand Down