Scroll-driven animations: animation-range and <timeline-range-name> data type #42020

estelle · 2025-11-19T15:08:10Z

create new page for <timeline-range-name>
rewrite animation-range shorthand property.
make example detail how the property works and interacts with afm

github-actions · 2025-11-19T15:09:59Z

Preview URLs

Flaws (39)

URL: /en-US/docs/Web/CSS/Guides/Scroll-driven_animations
Title: CSS scroll-driven animations
Flaw count: 2

macros:
- Macro produces link /en-US/docs/Web/CSS/scroll which is a redirect
- Can't resolve /en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Houdini

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range
Title: animation-range
Flaw count: 30

broken_links:
- /en-US/docs/Web/CSS/animation-range-start is a redirect
- /en-US/docs/Web/CSS/animation-range-end is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
- /en-US/docs/Web/CSS/animation-range-start is a redirect
- /en-US/docs/Web/CSS/animation-range-end is a redirect
- and 20 more flaws omitted
macros:
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect
- Can't resolve /en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Houdini

URL: /en-US/docs/Web/CSS/Reference/Values/timeline-range-name
Title: <timeline-range-name>
Flaw count: 7

broken_links:
- /en-US/docs/Web/CSS/CSS_scroll-driven_animations/Timelines is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- and 1 more flaws omitted
macros:
- Can't resolve /en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Houdini

External URLs (2)

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range
Title: animation-range

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/Reference/Values/timeline-range-name
Title: <timeline-range-name>

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2025-11-27 12:20:06)

chrisdavidmills

@estelle some comments for you to consider.

files/en-us/web/css/reference/values/timeline-range-name/index.md

files/en-us/web/css/reference/properties/animation-range/index.md

github-actions · 2025-11-20T14:53:30Z

This pull request has merge conflicts that must be resolved before it can be merged.

github-actions · 2025-11-23T17:13:19Z

This pull request has merge conflicts that must be resolved before it can be merged.

chrisdavidmills

@estelle A few more bits for you on this one.

chrisdavidmills · 2025-11-25T15:24:58Z

files/en-us/web/css/reference/properties/animation-range/index.md

-### Values
+## Description
+
+The `animation-range` shorthand property sets the `animation-range-start` and `animation-range-end` values, defining where along the animation timeline the animation will start and end. By default, animation keyframe effects are only applied to the elements when the animation is applied to the element based on the `animation-timeline`, meaning the animation is only applied between the range start and range end. To apply the animation outside of this range, set the {{cssxref("animation-fill-mode")}} to `backwards`, `forwards`, or `both`.


"By default, animation keyframe effects are only applied to the elements when the animation is applied to the element based on the animation-timeline..." - this is really confusing, and I'm not sure what you're trying to say.

Maybe something like "By default, animation styles are only applied to animated elements during the animation..."

files/en-us/web/css/reference/properties/animation-range/index.md

chrisdavidmills · 2025-11-25T15:31:07Z

files/en-us/web/css/reference/properties/animation-range/index.md

+
+The {{glossary("Scroll container", "scroll port")}} area known as the view progress visibility range is the area inside which the subject element of a [named view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines) animation is deemed to be visible. By default, this is the full range of the scrollport, but it can be adjusted using the {{cssxref("view-timeline-inset")}} property.
+
+If two values are specified as components of the `<animation-range>` property, they will be interpreted in the order `<animation-range-start>` then `<animation-range-end>`. The value of each component is either the keyword `normal` or a {{cssxref("length-percentage")}} or a [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name), optionally defined with a `<length-percentage>`. These values are space-separated. Normal is equal to `0%` for start and `100%` for end. Setting `normal` with a `<length-percentage>` for either the start or end range is invalid.


"The value of each component is either the keyword normal or a {{cssxref("length-percentage")}} or a <timeline-range-name>" - it can be a <length-percentage> and a <timeline-range-name>, no? Did you mean and/or?

files/en-us/web/css/reference/properties/animation-range/index.md

chrisdavidmills · 2025-11-25T15:43:01Z

files/en-us/web/css/reference/properties/animation-range/index.md

+Note how the `from`, or `0%`, keyframe property values are not applied to the animated element until the top block border edge is `10%` past the container's bottom edge; it is full size, fully opaque, and magenta. At that point, the animation is applied and it is styled with the values defined by the `0%` keyframe selector. When the `animation-range-end` is reached, 25% from the top of the scrollport, it jumps back to its original styling.

-{{EmbedLiveSample("Creating a named view progress timeline with range", "100%", "480px")}}
+The jumping to the default state occurs because we did not set the {{cssxref("animation-fill-mode")}} property on the element, which can be used to apply an animation's styles to an element before and after the animation's execution. We've omitted the property in this example to better enable visualizing the effects of `animation-range`.But, generally, you will want to set `animation-fill-mode: both` when creating [scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations).


This explanation doesn't make sense. You've mentioned that you'll probably want to set animation-fill-mode: both, which is good, but you say that we've omitted it from this example, which is incorrect — you've provided a checkbox to allow readers to compare the results with and without. But you no longer talk about it.

rearranged it to clarify

chrisdavidmills

@estelle OK, this is looking much better now, nice work. I have left a few more minor grammar suggestions, but I'm approving, so you can consider these and then get it in.

files/en-us/web/css/reference/properties/animation-range/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

estelle added 3 commits November 18, 2025 15:15

merge conflict

c4a50f7

revert local issue

feffb7d

Scroll driven animations: animation range and timeline names

b4774f7

estelle requested a review from a team as a code owner November 19, 2025 15:08

estelle requested review from chrisdavidmills and removed request for a team November 19, 2025 15:08

github-actions bot added the Content:CSS Cascading Style Sheets docs label Nov 19, 2025

Merge branch 'main' into scroll-animations

e501237

github-actions bot added the size/m [PR only] 51-500 LoC changed label Nov 19, 2025

estelle added 4 commits November 20, 2025 08:40

Scroll driven animations: links

ff6943b

Scroll driven animations: better explain afm

a2ad873

oopsies

b8e33cb

make the code for the checkbox visible

647f251

chrisdavidmills requested changes Nov 20, 2025

View reviewed changes

estelle mentioned this pull request Nov 20, 2025

CSS property pages: animation-range-start and animation-range-end #42029

Merged

github-actions bot added the merge conflicts 🚧 [PR only] label Nov 20, 2025

Merge branch 'main' into scroll-animations

66f09b2

github-actions bot added merge conflicts 🚧 [PR only] and removed merge conflicts 🚧 [PR only] labels Nov 23, 2025

Merge branch 'main' into scroll-animations

6ea0f7e

github-actions bot removed the merge conflicts 🚧 [PR only] label Nov 24, 2025

estelle and others added 5 commits November 24, 2025 10:25

Merge branch 'main' into scroll-animations

87d08d7

updates to animation-range

05df7b5

Merge branch 'main' into scroll-animations

ba1b0f7

add browser doesn't support messaging

255dacd

crosssing values

c68ff71

estelle requested a review from chrisdavidmills November 24, 2025 15:06

Merge branch 'main' into scroll-animations

022d698

chrisdavidmills requested changes Nov 25, 2025

View reviewed changes

estelle and others added 2 commits November 26, 2025 12:33

Merge branch 'main' into scroll-animations

f3f1867

changes per comments

2d85a93

estelle requested a review from chrisdavidmills November 26, 2025 12:06

chrisdavidmills approved these changes Nov 26, 2025

View reviewed changes

estelle and others added 2 commits November 27, 2025 13:17

Apply suggestions from code review

38bc497

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

Merge branch 'main' into scroll-animations

f8748bf

estelle merged commit ea22b9b into main Nov 27, 2025
13 checks passed

estelle deleted the scroll-animations branch November 27, 2025 12:19


		The {{glossary("Scroll container", "scroll port")}} area known as the view progress visibility range is the area inside which the subject element of a [named view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines) animation is deemed to be visible. By default, this is the full range of the scrollport, but it can be adjusted using the {{cssxref("view-timeline-inset")}} property.

		If two values are specified as components of the `<animation-range>` property, they will be interpreted in the order `<animation-range-start>` then `<animation-range-end>`. The value of each component is either the keyword `normal` or a {{cssxref("length-percentage")}} or a [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name), optionally defined with a `<length-percentage>`. These values are space-separated. Normal is equal to `0%` for start and `100%` for end. Setting `normal` with a `<length-percentage>` for either the start or end range is invalid.

Scroll-driven animations: animation-range and <timeline-range-name> data type #42020

Scroll-driven animations: animation-range and <timeline-range-name> data type #42020

Uh oh!

Conversation

estelle commented Nov 19, 2025 • edited by chrisdavidmills Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Nov 20, 2025

Uh oh!

github-actions bot commented Nov 23, 2025

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisdavidmills Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisdavidmills Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

estelle Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

estelle commented Nov 19, 2025 •

edited by chrisdavidmills

Loading

github-actions bot commented Nov 19, 2025 •

edited

Loading