Update view-timeline-name property

[estelle]

Updated the description and syntax for the view-timeline-name property to clarify its usage and allowed values. include multiple and globalss

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Reference/Properties/view-timeline-name

Flaws (10)

URL: /en-US/docs/Web/CSS/Reference/Properties/view-timeline-name
Title: view-timeline-name
Flaw count: 10

• broken_links:
  • /en-US/docs/Web/CSS/view-timeline-axis is a redirect
  • /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets 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/dashed-ident is a redirect
  • /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
  • and 1 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

(comment last updated: 2025-11-25 16:39:21)

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	```
	````

[dipikabh]

Thanks, @estelle! I've added a few comments

[dipikabh]

how about we move some of the relevant info from "Description" here:

Suggested change

	- : A {{cssxref("dashed-ident")}} defining a name for a view progress timeline.
	- : Specifies a comma-separated list of {{cssxref("dashed-ident")}} custom name identifiers. All `<dashed-ident>` values must start with `--`, which helps avoid name clashes with standard CSS keywords.

[dipikabh]

Suggested change

	- : The timeline has no name. This is the default.
	- : Indicates that the timeline has no name. This is the default value.

[dipikabh]

to indicate that it can be used to specify one or more names

Suggested change

	The **`view-timeline-name`** [CSS](/en-US/docs/Web/CSS) property specifies the names for the [named view progress timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline) associated with the element.
	The **`view-timeline-name`** [CSS](/en-US/docs/Web/CSS) property specifies the names of one or more [named view progress timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline) associated with the element.

[dipikabh]

should we say "Custom identifier" instead?

[dipikabh]

I would suggest a different flow. Currently the text is going back and forth between the concept and the property. WDYT about something along these lines:

Suggested change

	The `view-timeline-name` property is used to define the name of a _named view progress timeline_, which is progressed through based on the change in visibility of an element (known as the _subject_) inside a scrollable element (_scroller_). The `view-timeline-name`, {{cssxref("view-timeline-axis")}} and {{cssxref("view-timeline-inset")}} properties can also be set using the {{cssxref("view-timeline")}} shorthand property.
	The `view-timeline-name` property is set on the subject. The value is the keyword `none` or a comma-separated list of `<dashed-ident>` custom name identifiers. All `<dashed-ident>` values must start with `--`, which helps avoid name clashes with standard CSS keywords. The names can then be referenced in {{cssxref("animation-timeline")}} declarations to indicate the element that will be animated as the timeline progresses.
	If the subject's named scroller element does not overflow its container in the [axis dimension](/en-US/docs/Web/CSS/view-timeline-axis) or if the overflow is hidden or clipped, no scroll progress timeline will be created.
	A view progress timeline is progressed through based on the change in visibility of an element, called the _subject_, inside a scrollable element, called the _scroller_. The `view-timeline-name` property is set on the subject. If the subject's named scroller element does not overflow its container in the [axis dimension](/en-US/docs/Web/CSS/view-timeline-axis) or if the overflow is hidden or clipped, no scroll progress timeline will be created.
	You can also set `view-timeline-name` by using the {{cssxref("view-timeline")}} shorthand property. If you specify `<dashed-ident>` values, the names can be referenced in {{cssxref("animation-timeline")}} declarations to indicate the element that will be animated as the timeline progresses.