Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/web/api/interestevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ This is the event object for the {{domxref("HTMLElement.interest_event", "intere

## Constructor

- {{DOMxRef("InterestEvent.InterestEvent", "InterestEvent()")}} {{experimental_inline}}
- {{DOMxRef("InterestEvent.InterestEvent", "InterestEvent()")}} {{experimental_inline}} {{non-standard_inline}}
- : Creates an `InterestEvent` object.

## Instance properties

_This interface inherits properties from its parent, {{DOMxRef("Event")}}._

- {{DOMxRef("InterestEvent.source")}} {{ReadOnlyInline}} {{experimental_inline}}
- {{DOMxRef("InterestEvent.source")}} {{ReadOnlyInline}} {{experimental_inline}} {{non-standard_inline}}
- : An {{domxref("Element")}} object instance that represents the interest invoker element on which interest was shown or lost to fire the event.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@ title: "NavigationHistoryEntry: dispose event"
short-title: dispose
slug: Web/API/NavigationHistoryEntry/dispose_event
page-type: web-api-event
status:
- experimental
browser-compat: api.NavigationHistoryEntry.dispose_event
---

{{APIRef("Navigation API")}}{{SeeCompatTable}}
{{APIRef("Navigation API")}}

The **`dispose`** event of the {{domxref("NavigationHistoryEntry")}} interface is fired when the entry is no longer part of the history entry list.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/navigationhistoryentry/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ _Inherits methods from its parent, {{DOMxRef("EventTarget")}}._

## Events

- {{domxref("NavigationHistoryEntry/dispose_event", "dispose")}} {{Experimental_Inline}}
- {{domxref("NavigationHistoryEntry/dispose_event", "dispose")}}
- : Fires when the entry is no longer part of the history entry list.

## Examples
Expand Down
6 changes: 2 additions & 4 deletions files/en-us/web/api/navigationprecommitcontroller/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,18 @@
title: NavigationPrecommitController
slug: Web/API/NavigationPrecommitController
page-type: web-api-interface
status:
- experimental
browser-compat: api.NavigationPrecommitController
---

{{APIRef("Navigation API")}}{{SeeCompatTable}}
{{APIRef("Navigation API")}}

The **`NavigationPrecommitController`** interface of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} defines redirect behavior for a navigation [precommit handler](/en-US/docs/Web/API/NavigateEvent/intercept#precommithandler).

{{InheritanceDiagram}}

## Instance methods

- {{domxref("NavigationPrecommitController.redirect", "redirect()")}} {{Experimental_Inline}}
- {{domxref("NavigationPrecommitController.redirect", "redirect()")}}
- : Redirects the browser to a specified URL and specifies history behavior and any desired state information.

## Description
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@ title: "NavigationPrecommitController: redirect() method"
short-title: redirect()
slug: Web/API/NavigationPrecommitController/redirect
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.NavigationPrecommitController.redirect
---

{{APIRef("Navigation API")}}{{SeeCompatTable}}
{{APIRef("Navigation API")}}

The **`redirect()`** method of the
{{domxref("NavigationPrecommitController")}} interface redirects the browser to a specified URL and specifies history behavior and any desired state information.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,42 @@ browser-compat: css.properties.view-timeline-name
sidebar: cssref
---

The **`view-timeline-name`** [CSS](/en-US/docs/Web/CSS) 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_). `view-timeline` is set on the subject.

The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller and 100% when it reaches the opposite edge.
The name is then referenced in an {{cssxref("animation-timeline")}} declaration to indicate the element that will be animated as the timeline progresses. This can be the subject element, but it doesn't have to be — you can animate a different element as the subject moves through the scrolling area.

> [!NOTE]
> If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created.

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`** [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.

## Syntax

```css
/* Keyword value */
view-timeline-name: none;

/* Custom identifier */
view-timeline-name: --custom_name_for_timeline;

/* Multiple identifiers */
view-timeline-name: --first_timeline_name, --another_timeline_name;

/* Global values */
view-timeline-name: inherit;
view-timeline-name: initial;
view-timeline-name: revert;
view-timeline-name: revert-layer;
view-timeline-name: unset;
```

### Values

Allowed values for `view-timeline-name` are:

- `none`
- : The timeline has no name.
- : Indicates that the timeline has no name. This is the default value.
- `<dashed-ident>`
- : An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an {{cssxref("animation-timeline")}} property.
- : 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.

> [!NOTE]
> [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) values must start with `--`, which helps avoid name clashes with standard CSS keywords.
## Description

The `view-timeline-name` property is used to set the name of a [view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines). 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. You can also set `view-timeline-name` by using the {{cssxref("view-timeline")}} shorthand property.

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.

Once created, the `<dashed-ident>` name values specified can be referenced in {{cssxref("animation-timeline")}} declarations to indicate the element that will be animated as the timeline progresses.

## Formal definition

Expand Down Expand Up @@ -149,6 +157,20 @@ Last, an animation is specified on the element that animates its opacity and sca
}
```

```css hidden
@layer no-support {
@supports not (view-timeline-name: none) {
body::before {
content: "Your browser doesn't support the `view-timeline-name` property.";
background-color: wheat;
display: block;
text-align: center;
padding: 1em;
}
}
}
```

#### Result

Scroll to see the subject element being animated.
Expand All @@ -166,6 +188,7 @@ Scroll to see the subject element being animated.
## See also

- {{cssxref("animation-timeline")}}
- {{cssxref("timeline-scope")}}
- {{cssxref("view-timeline")}}, {{cssxref("view-timeline-axis")}}, {{cssxref("view-timeline-inset")}}
- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)
- {{cssxref("view-timeline")}}
- [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
16 changes: 8 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"type": "git",
"url": "git+https://github.com/mdn/content.git"
},
"packageManager": "npm@11.6.2",
"engines": {
"node": ">=24"
},
Expand Down Expand Up @@ -44,7 +45,7 @@
},
"dependencies": {
"@apideck/better-ajv-errors": "^0.3.6",
"@mdn/fred": "1.9.6",
"@mdn/fred": "1.9.7",
"@octokit/rest": "^22.0.1",
"ajv": "^8.17.1",
"ajv-formats": "^3.0.1",
Expand Down