[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.
| @keyframes grow { | ||
| to { scale: 2; } |
There was a problem hiding this comment.
Would it make sense to use a color animation here? That avoids getting into questions like, what if the animation affects the scrollable area, or what do we do about prefers-reduced-motion.
| Because `.scroller` is the nearest ancestor [=scroll container=], | ||
| this results in the `.scroller` element driving the animation: | ||
| as you scroll `.scroller` up and down, the `grow` animations’s progress | ||
| moves forwards or backwards in direct response. |
There was a problem hiding this comment.
Suggest being a little more explicit about what's happening--that it's an animation between scale: 1 at the start of the scroller and scale: 2 at the end--to help the reader imagine what the animation is doing as they scroll.
| In the following example each 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.
I feel like this needs a bit more explanation to illustrate the point.
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
Co-authored-by: fantasai <[email protected]>
Add some examples to the scroll-animations-1 spec.