DRAFT: CSS scroll driven animation guide: range insets #42105
+440
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Merge remote-tracking branch 'upstream/main'
Contributor
|
Preview URLs
Flaws (2)URL:
URL:
(comment last updated: 2025-12-16 00:39:40) |
fix: remove flex from example elements Flex interfering with writing-mode behaviour Co-authored-by: Brian Smith <[email protected]>
…ultipart/form-data (#42065) * docs(headers): clarify quotes requirement in Content-Disposition of multipart/form-data * Update files/en-us/web/http/reference/headers/content-disposition/index.md * Update files/en-us/web/http/reference/headers/content-disposition/index.md --------- Co-authored-by: Hamish Willee <[email protected]>
Reworded instructions and explanations for clarity and consistency.
* Fix arrow function syntax in example The original provided example is correct, but I think the `arrow function` is literally **equivalent** to an **anonymous function**. * Fix syntax * Update files/en-us/learn_web_development/core/scripting/functions/index.md Co-authored-by: Chris Mills <[email protected]> * Update files/en-us/learn_web_development/core/scripting/functions/index.md Co-authored-by: Chris Mills <[email protected]> * Refactor map function to use the anynomous function syntax Refactor map function to use arrow function syntax. * Fix a syntax error * Replace terminal period with colon * Correct arrow function syntax in event listener example Fix syntax error in the arrow function example for addEventListener. * Add nolint to problem code block, grammar nits --------- Co-authored-by: Joshua Chen <[email protected]> Co-authored-by: Chris Mills <[email protected]>
Updated background-repeat references to include background-repeat-x and background-repeat-y as supported, because Safari does support these two properties
* Revise CSS timeline-scope property Updated the documentation for the `timeline-scope` CSS property to enhance clarity and consistency. Improved examples and descriptions related to timeline scope and its usage. * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/reference/properties/timeline-scope/index.md Co-authored-by: Brian Smith <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Brian Smith <[email protected]>
* Add useful reference links to to MDN docs Most of the function names on this page contained links in them, while some lacked it. I added the missing links so that it is easier for the users to access the docs for the referenced functions. * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* chore: auto-fix Markdownlint, Prettier, and front-matter issues * Update files/en-us/web/css/reference/properties/animation-range/index.md * Update files/en-us/web/css/reference/properties/animation-range/index.md --------- Co-authored-by: Estelle Weyl <[email protected]>
* Draft a federated identity guide * Update files/en-us/web/security/authentication/federated_identity/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/security/authentication/federated_identity/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * back-channel logout example sentence * OP->IdP * Clearer language * ... * ... * Clarify authorization code injection * Reword client id preamble * Update CSRF description * Add a section on FedCM * Link to BCP * Mention PKCE downgrade attacks * Recommend client auth based on public-key crypto * Add sections on choosing idps and a summary * Update wording for client secret * clarify that PKCE is not used when the attacks work * Apply suggestions from code review Co-authored-by: Hamish Willee <[email protected]> * Hint that client===RP * Review feedback --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Hamish Willee <[email protected]>
Add 'json' as a value for sec-fetch-dest
* New 'Defenses' page * Move top-level pages under 'Defenses' * Update sidebar * Fix wiki history * Fix a link * Apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> * Fix review comments --------- Co-authored-by: Chris Mills <[email protected]>
* chore: auto-fix Markdownlint, Prettier, and front-matter issues * Fix more --------- Co-authored-by: Joshua Chen <[email protected]>
Contributor
|
This pull request has merge conflicts that must be resolved before it can be merged. |
github-actions
bot
added
merge conflicts 🚧
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| We apply the animation and an [anonymous view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_view_progress_timeline_the_view_function) to the element we want to animate: | ||
|
|
||
| ```css live-sample___default live-sample___selector30 live-sample___selector |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| ```css live-sample___default live-sample___selector30 live-sample___selector | |
| ```css live-sample___default live-sample___selector30 live-sample___selector |
| } | ||
| ``` | ||
|
|
||
| ```html hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| ```html hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both | |
| ```html hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both |
| </main> | ||
| ``` | ||
|
|
||
| ```css hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| ```css hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both | |
| ```css hidden live-sample___default live-sample___selector30 live-sample___selector live-sample___range live-sample___range_both |
|
|
||
| ## Controlling insets with animation-range | ||
|
|
||
| By default, a keyframe animation's range is the same as the entirety of the timeline defined by the {{cssxref("animation-timeline")}}. This range can be restricted, or inset. Animation keyframes can be attached in reference to an animation attachment range, restricting the animation’s active interval to that range of a timeline, with the {{cssxref("animation-range")}} property, which is shorthand for {{cssxref("animation-range-start")}} and {{cssxref("animation-range-end")}}, in that order. |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| By default, a keyframe animation's range is the same as the entirety of the timeline defined by the {{cssxref("animation-timeline")}}. This range can be restricted, or inset. Animation keyframes can be attached in reference to an animation attachment range, restricting the animation’s active interval to that range of a timeline, with the {{cssxref("animation-range")}} property, which is shorthand for {{cssxref("animation-range-start")}} and {{cssxref("animation-range-end")}}, in that order. | |
| By default, a keyframe animation's range is the same as the entirety of the timeline defined by the {{cssxref("animation-timeline")}}. This range can be restricted, or inset. Animation keyframes can be attached in reference to an animation attachment range, restricting the animation's active interval to that range of a timeline, with the {{cssxref("animation-range")}} property, which is shorthand for {{cssxref("animation-range-start")}} and {{cssxref("animation-range-end")}}, in that order. |
|
|
||
| The declaration `animation-range-start: entry 20%` represents the point in a view progress timeline from 20% of the way through the scroll port from the point where the subject element's top edge first starts to enter the scroll port. | ||
|
|
||
| ```css hidden live-sample___selector live-sample___range live-sample___range_both |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| ```css hidden live-sample___selector live-sample___range live-sample___range_both | |
| ```css hidden live-sample___selector live-sample___range live-sample___range_both |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
14 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is still in DRAFT mode!!!!