[scroll-animations-1] Add examples

[bramus]

Add some examples to the scroll-animations-1 spec.

[bramus]

I believe this PR is ready for review.

One thing I struggled with is there to place the examples for animation-range. I chose not to put them under Appendix A because the entire section is marked as “This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.”.

If I were an author, I would like to see the examples that use animation-range with scroll-driven animations in the scroll-animations-1 spec. Because of that, I have put the examples under the https://drafts.csswg.org/scroll-animations-1/#scroll-driven-attachment section which mentions restricting the active interval.

As a result, though, the section itself might need some rewording / extra sentences which I can tackle later.

[svgeesus]

LGTM

[svgeesus]

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

[fantasai]

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.

[bramus]

Addressed the comments. Re-requesting a review.

[bramus]

Went over the PR with @fantasai. Added remarks together for me to resolve.

[bramus]

@fantasai I believe I have addressed the open issues regarding this PR, by more describing the visual outcome of the examples. PTAL.

I’m tinkering with some faux animations – e.g. https://codepen.io/bramus/pen/LEPwzrL/d5c60ce4645de7aa11abae28db79288c - but suggest on adding those later.

[flackr]

Thanks for the examples and details. This will be really helpful.