[scroll-animations-1] Add examples #11421
Conversation
|
I believe this PR is ready for review. One thing I struggled with is there to place the examples for If I were an author, I would like to see the examples that use As a result, though, the section itself might need some rewording / extra sentences which I can tackle later. |
That should not hold up merging this PR however |
There was a problem hiding this comment.
Some minor comments. General comment is, the goal of example text is to step away from the spec's precision and generality and help the reader see concretely what it does, using the example as an illustration of what the spec means in more practical and illustrative terms.
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
…instances per match
|
Addressed the comments. Re-requesting a review. |
| @@ -670,6 +876,27 @@ spec:selectors-4; type:dfn; text:selector | |||
| The values of {{ViewTimeline/subject}}, {{ScrollTimeline/source}}, and {{AnimationTimeline/currentTime}} | |||
| are all computed when any of them is requested or updated. | |||
|
|
|||
| <div class=example> | |||
| In the following example, each child of the `.scroller` element | |||
| will reveal itself as it crosses the scrollport. | |||
There was a problem hiding this comment.
TODO: Make more explicit that this is the same as the CSS example
|
|
||
| <div class=example> | ||
| In the following example, each direct child of the `.scroller` element | ||
| reveals itself as it enters the scrollport instead of when entirely crossing it. |
There was a problem hiding this comment.
Clarify what this looks like from the user's perspective: it's opaque once fully visible.
| ``` | ||
|
|
||
| The `reveal` effect is linked to the ''entry'' range | ||
| while the `hide` effect is linked to the ''exit'' range. |
There was a problem hiding this comment.
TODO: Add extra explanation about the visual output
Add some examples to the scroll-animations-1 spec.