Conversation
|
Preview URLs (3 pages)
Flaws (2) Note! 2 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-03-31 08:03:31) |
Rephrase the explanation about limiting animations to the middle of the scrollport for clarity.
|
Hi @estelle, I'm off next week. Could you request someone else for a review? |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle first pass, bunch of comments for you.
files/en-us/web/css/guides/scroll-driven_animations/timeline_insets/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/guides/scroll-driven_animations/timeline_insets/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| The various timeline range names, their meanings, and how they are used are discussed in the [timeline range name guide](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/timeline_range_name). This guide explains limiting the animation timeline to a specific portion of the animation timeline range, effectively _insetting_ the animation timeline, using length or percentage values. | ||
|
|
||
| ## Animation timelines: a primer |
There was a problem hiding this comment.
It seems to me like quite a bit of this primer (and the section that follows it) is duplicated from https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names#view_progress_timeline_primer.
Couldn't you just cut this stuff down a bit, and just add a note that says "if you are new to timeline range names and insets, be sure to read Understanding timeline range names before reading this article." or similar?
|
|
||
| ### Animation range properties | ||
|
|
||
| The {{cssxref("animation-range")}} properties enable setting a named timeline range and then insetting animations from the animation attachment ranges using {{cssxref("length-percentage")}} inset values, such as `20%` or `100px`. |
There was a problem hiding this comment.
In this section, I'd first explain that the default timeline range is cover, with start and end positions of 0% and 100%, and what that means. Then say you can adjust the named timeline range and its offsets using the animation-range* properties.
Next, say that we've already covered setting these values to timeline range names in the previous article — this changes the timeline range used, but keeps the start and end as 0% and 100% of that range.
Finally, explain that these properties can also take <length-percentage> values, or a combination of timeline range name and <length-percentage>, and say what both of those choices do.
|
|
||
| The animation only begins when the element reaches the 20% mark along the animation attachment range. This point is that is `60px`, `100px`, or `150px` from the bottom edge of the scroll port, depending on the the size of the element, is the animation's `0%` progress point. The location of the subject element at this point, representing the position of the element when the `from` or `0%` keyframe is applied, is shown in yellow. | ||
|
|
||
| The red represents the location of the animated element relative to the scrollport when the `to` or `100%` keyframe is applied, which is the end of the animation. This point is either `180px`, `300px`, or `450px` from the bottom edge of the scrollport, depending on the subject size. The animation occurs when the element is between the `to` and the `from` positions; between the positions along the animation attachment range defined. |
There was a problem hiding this comment.
OK, so you have explained some of the pixel amount details down here, as I asked for earlier. But it seems very hard to follow down here. It would be better explained right next to the live example.
|
|
||
| The red represents the location of the animated element relative to the scrollport when the `to` or `100%` keyframe is applied, which is the end of the animation. This point is either `180px`, `300px`, or `450px` from the bottom edge of the scrollport, depending on the subject size. The animation occurs when the element is between the `to` and the `from` positions; between the positions along the animation attachment range defined. | ||
|
|
||
| You may have noticed something interesting about the dashed horizontal lines: when the animation starts, the line that is 20% from the end edge of the viewport is 20% from the _top_ of the subject element and the line that is 60% from the end edge of the viewport is 60% from the _top_ of the subject element when the animation ends. |
There was a problem hiding this comment.
I found this paragraph very hard to follow, and I'm not sure how it helps.
|
|
||
| You may have noticed something interesting about the dashed horizontal lines: when the animation starts, the line that is 20% from the end edge of the viewport is 20% from the _top_ of the subject element and the line that is 60% from the end edge of the viewport is 60% from the _top_ of the subject element when the animation ends. | ||
|
|
||
| ### Subject size matters |
There was a problem hiding this comment.
This example is also really hard to follow. I think the issue is trying to understand why the "subject smaller than scrollport" behaves as it does, and then also trying to understand why the "subject larger than scrollport" example behaves as it does, both while trying to imagine how the 0%/100% equivalent would behave. It also includes a negative percentage just to make things even harder.
I would split this up into two examples, one showing "subject smaller than scrollport" with the -20%/20% shown alongside the 0%/100% for comparison, and one showing "subject larger than scrollport" with the -20%/20% shown alongside the 0%/100% for comparison.
|
|
||
| ### Percentages equal to the scrollport | ||
|
|
||
| For the start and end percentages to be relative to the scrollport and the subjects, we use the `<timeline-range-name>` keyword `contain` along with the percentage for each of our `animation-range-*` values. |
There was a problem hiding this comment.
Do you mean "relative to the height of the scrollport plus the height of the subject", or something else? This is a big vague.
| } | ||
| ``` | ||
|
|
||
| Without needing to know the size of the container or the subjects, we are able to limit our animation to the middle of scrollport. |
There was a problem hiding this comment.
How does this relate to the text at the start of the section? Especially the bit about subject being same size as scrollport? This needs more explanation of why the animation is limited to the middle of the scrollport.
4 participants
adding a new guide.
Other guide is #42853