Conversation
github-actions
bot
added
Content:CSS
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md
Outdated
Show resolved
Hide resolved
Preview URLs (9 pages)
Flaws (27)Note! 5 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
URL:
URL:
URL:
(comment last updated: 2026-01-28 07:45:51) |
…ange_names/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle Wow, that was a marathon review session! I'm really impressed at the effort you've put in to try to understand and explain this stuff. It is some of the most confusing CSS theory I've ever come across.
I think there is still some work to be done here. Most significantly, I am really missing some fundamental understanding of how the ranges affect the start and end animation positions, in the case of cover/contain. This stuff makes a lot more sense in the case of the entry and exit keywords...
But, great start, nice work.
files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| In [view-progress timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines), keyframe progression is tied to how much of the element is visible within the scroller. As the element enters the viewport, the timeline advances. If the user reverses, the timeline reverses: as the view progress element comes into or moves out of view, the timeline progresses or reverses, respectively. The animation only occurs when the element is visible within its scrollport. If scrolling stops while the element is in view, the animation pauses. | ||
|
|
||
| By default, the view timeline progress starts when the tracked subject's start edge intersects the scrollport at the block or inline end edge and ends when the subject's end edge exits the scrollport at the block or inline start edge. |
There was a problem hiding this comment.
| By default, the view timeline progress starts when the tracked subject's start edge intersects the scrollport at the block or inline end edge and ends when the subject's end edge exits the scrollport at the block or inline start edge. | |
| By default, the view timeline progress starts when the tracked subject's start edge intersects the scrollport at the end edge and ends when the subject's end edge exits the scrollport at the start edge. If the scrolling occurs in the inline direction, the referenced edges will be the subject and scrollport's inline edges. If the scrolling occurs in the block direction, the referenced edges will be the subject and scrollport's block edges. |
I'm not sure if this is the most elegant way to say this, but I felt it should be qualified somehow. Alternatively (or in addition), maybe point the reader to https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines for information?
There was a problem hiding this comment.
went with
By default, the view timeline progress starts when the tracked subject's start edge intersects the scrollport at the end edge and ends when the subject's end edge exits the scrollport at the start edge. These are the subject and scrollport's top and bottom edges when scrolling vertically, and the left and right or right and left edges when scrolling horizontally, depending on the writing mode.
|
|
||
| {{EmbedLiveSample("initial", "100%", "400")}} | ||
|
|
||
| Scroll down. Note how the animation begins just as the top edge of the animated element aligns with the bottom edge of the scroll container and ends, reaching `100%` progress, when the bottom edge aligns with the top edge of the container, no matter how tall the animated element is. |
There was a problem hiding this comment.
This is a really nice example. However, it isn't introduced beforehand. I'd suggest moving this paragraph above it and starting it along the lines of "In the following example, try scrolling down."
|
|
||
| Scroll down. Note how the animation begins just as the top edge of the animated element aligns with the bottom edge of the scroll container and ends, reaching `100%` progress, when the bottom edge aligns with the top edge of the container, no matter how tall the animated element is. | ||
|
|
||
| By default, the element animates the entire time whenever any portion of the subject element is visible. This means the **animation attachment range** is the sum of the height of the scroll container and the height of the subject element. For example, if the scroll container is `250px` tall and the animated element is `50px` tall, the vertical animation attachment range will be `300px` tall. If the element is `250px` tall, the range becomes `500px`; if it's `500px` tall, the range becomes `750px`. This behavior is consistent regardless of element size; so we can use scroll view timelines even when we don't know the exact dimensions of our scroll containers or the dimensions of our subjects. |
There was a problem hiding this comment.
| By default, the element animates the entire time whenever any portion of the subject element is visible. This means the **animation attachment range** is the sum of the height of the scroll container and the height of the subject element. For example, if the scroll container is `250px` tall and the animated element is `50px` tall, the vertical animation attachment range will be `300px` tall. If the element is `250px` tall, the range becomes `500px`; if it's `500px` tall, the range becomes `750px`. This behavior is consistent regardless of element size; so we can use scroll view timelines even when we don't know the exact dimensions of our scroll containers or the dimensions of our subjects. | |
| By default, the element is being animated for the entire time whenever any portion of the subject element is visible. This means the **animation attachment range** is the sum of the height of the scroll container and the height of the subject element. For example, if the scroll container is `250px` tall and the animated element is `50px` tall, the vertical animation attachment range will be `300px` tall. If the element is `250px` tall, the range becomes `500px`; if it's `500px` tall, the range becomes `750px`. This behavior is consistent regardless of element size, so we can use scroll view timelines even when we don't know the exact dimensions of our scroll containers or subjects. |
Question: in my mind, the animation attachment range is the subject height, plus the height of the scrollport portion above the subject. Surely the portion of the scrollport after the subject is not included, because after the end edge of the subject has passed through the start edge of the scrollport, the animation is finished. Why isn't this the case?
There was a problem hiding this comment.
the animation attachment range is the height of the scrollport plus the subject height on top of the scrollport, not the other way around. i think that is what might be confusing you .
Tried to clarify with the following:
By default, the element is being animated the entire time any portion of the subject element is visible. This means the animation attachment range is the sum of the height of the scroll container and the height of the subject element, with that extra height being at the scroll end edge. For example, if the scroll container is
250pxtall and the animated element is50pxtall, the vertical animation attachment range will be300pxtall, starting at the bottom of the scrollport in our example. If the element is250pxtall, the range becomes500px; if it's500pxtall, the range becomes750px. This behavior is consistent regardless of element size; so we can use scroll view timelines even when we don't know the exact dimensions of our scroll containers or the dimensions of our subjects.
|
|
||
| When the subjects are small enough to be fully contained within the viewport, the animation attachment timeline is at the start (`entry`) or end (`exit`) of the scrollport and the size of the attachment range is limited to the size of the animated element in the scroll direction. The percent offset, if any, is relative to the subject's size, not the viewport size. | ||
|
|
||
| If the animated element is the size of the viewport or larger, the animation doesn't begin until the element fully covers the scrollport in the scroll direction. If your animated element is larger than the scrollport, you may prefer to use `entry-crossing` and `exit-crossing`. |
There was a problem hiding this comment.
You don't explain explicitly what is happening here when the 30% and 70% range is set. Doing som would be a good idea.
However, This example intuitively makes sense to me, unlike the earlier ones. I think this is because the offset is relative to the subject's size.
|
|
||
| ## Entry- and exit-crossing | ||
|
|
||
| If the animated element is smaller than the scrollport, and you want the full animation to occur fully, from beginning to end, as it enters or as it exits the scrollport, use `entry` or `exit`, respectively. If your animated element is larger than the viewport, the animation range is contained in the scrollport, while the element is not. The `entry` value sets the `100%` progress to be when the element's start edge reaches the start-edge of the scrollport, and `exit` only reaches the `0%` that is when the element's end-edge reaches the scroll container's end edge; when the animated element has already partially scrolled past the scrollport's start edge. |
There was a problem hiding this comment.
| If the animated element is smaller than the scrollport, and you want the full animation to occur fully, from beginning to end, as it enters or as it exits the scrollport, use `entry` or `exit`, respectively. If your animated element is larger than the viewport, the animation range is contained in the scrollport, while the element is not. The `entry` value sets the `100%` progress to be when the element's start edge reaches the start-edge of the scrollport, and `exit` only reaches the `0%` that is when the element's end-edge reaches the scroll container's end edge; when the animated element has already partially scrolled past the scrollport's start edge. | |
| If the subject element is smaller than the scrollport, and you want the full animation to occur as it enters or exits the scrollport, you can happily use `entry` or `exit`, respectively. If your animated element is larger than the viewport, the animation range is contained in the scrollport, while the element is not. The `entry` value sets the `100%` progress to be when the element's start edge reaches the start-edge of the scrollport, and `exit` only reaches the `0%` that is when the element's end-edge reaches the scroll container's end edge; when the animated element has already partially scrolled past the scrollport's start edge. |
There was a problem hiding this comment.
The first sentence makes sense in this paragraph. The rest of it is really difficult to parse. Try simplifying it a bit, and focusing more on high-level description rather than specifics?
Maybe something like "However, if your subject element is larger than the scrollport, entry and exit don't work so well. Respectively, the animation will stop when the subject's start edge first gets to the scrollport start edge or when he subject's end edge first gets to the scrollport end edge. In either case, you don't get to see all of the animation. In such cases, entry-crossing and exit-crossing are a better fit."
files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| ### Exit | ||
|
|
||
| The `exit-crossing` value represents the range during which the animated element crosses the start edge of the viewport, with `0%` progress occurring when the element's start edge aligns with the start edge the viewport and `100%` progress occurring when the element's end edge reaches the start edge of the viewport, meaning it starts animating as soon as it covers the viewport, and continues animating until it fully exits the viewport's start edge. |
There was a problem hiding this comment.
You've not included a graph to compare exit and exit-crossing, which is a shame, as the graph comparing entry and entry-crossing makes sense and is useful.
You've also not included any coverage of different ranges for entry-cross- or exit-crossing, e.g. the 30%/70% example. This seems inconsistent.
There was a problem hiding this comment.
The insetting is a focus of a different guide. I'll be linking to that from this post when it's done. I've included it a few places in this post to link to that post later
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
2 participants
Creates a new guide
Links to the guide
added two guides to the sidebar
crosslinking
This guide is really about names. I am currently working on another guide, which should be ready in a few weeks. #42105 that covers insetting view timelines. I pulled out the named ranges because it was getting overwhelming.