Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[scroll-animations-1] Add examples #11421

Open
wants to merge 19 commits into
base: main
Choose a base branch
from

Conversation

bramus
Copy link
Contributor

@bramus bramus commented Dec 30, 2024

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

@bramus bramus requested a review from fantasai December 30, 2024 16:15
@bramus
Copy link
Contributor Author

bramus commented Dec 30, 2024

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.

@bramus bramus marked this pull request as ready for review December 30, 2024 16:53
Copy link
Contributor

@svgeesus svgeesus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@svgeesus
Copy link
Contributor

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

Copy link
Collaborator

@fantasai fantasai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

scroll-animations-1/Overview.bs Outdated Show resolved Hide resolved
scroll-animations-1/Overview.bs Show resolved Hide resolved
scroll-animations-1/Overview.bs Outdated Show resolved Hide resolved
scroll-animations-1/Overview.bs Outdated Show resolved Hide resolved
scroll-animations-1/Overview.bs Outdated Show resolved Hide resolved
scroll-animations-1/Overview.bs Outdated Show resolved Hide resolved
Comment on lines 1003 to 1004
In the following example each child of the `.scroller` element
reveals itself as it enters the scrollport instead of when entirely crossing it.
Copy link
Collaborator

@fantasai fantasai Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like this needs a bit more explanation to illustrate the point.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the clarification of what view() does to the example that introduced it (at around line 750). .

@bramus
Copy link
Contributor Author

bramus commented Jan 20, 2025

Addressed the comments. Re-requesting a review.

@bramus bramus requested a review from fantasai January 20, 2025 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants