# Scroll-linked Animations

## Unofficial Proposal Draft, 1 January 1970

This version:
  https://wicg.github.io/scroll-animations/
Editors:
  Brian Birtles <bbirtles@mozilla.com>
  Botond Ballo <botond@mozilla.com>
  Stephen McGruer <smcgruer@google.com>
  Antoine Quint <graouts@apple.com>
Former Editor:
  Mantaroh Yoshinaga
Issue Tracking:
  GitHub Issues
  GitHub Issues
Suggest an Edit for this Spec:
  GitHub Editor

Copyright © 1970 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.

## Abstract

Defines an API and markup for creating animations that are either triggered by or tied to the scroll offset of a scroll container.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

## Status of this document

## 1. Introduction

This specification defines mechanisms for driving the progress of an animation based on the scroll progress of a scroll container.

### 1.1. Relationship to other specifications

Web Animations [WEB-ANIMATIONS-1] defines an abstract conceptual model for animations on the Web platform, with elements of the model including animations and their timelines, and associated programming interfaces.

This specification extends this model by defining a new type of animation timeline: a scroll timeline.

This specification defines both programming interfaces for interacting with these concepts, as well as CSS markup which applies these concepts to CSS Animations [CSS3-ANIMATIONS].

The behavior of the CSS markup is described in terms of the programming interfaces. User agents that do not support script may still implement the CSS markup provided it behaves as if the underlying programming interfaces were in place.

### 1.2. Relationship to asynchronous scrolling

Some user agents support scrolling that’s asynchronous with respect to layout or script. This specification is intended to be compatible with such an architecture.

Specifically, this specification allows expressing scroll-linked effects in a way that does not require script to run each time the effect is sampled. User agents that support asynchronous scrolling are allowed (but not required) to sample such effects asynchronously as well.

## 2. Use cases

This section is non-normative

Note: Based on this curated list of use cases.

### 2.1. Scroll-triggered animations

#### 2.1.1. Navigation bar shrinking effect

It is common to trigger an animation to run when the scroll position reaches a certain point. For example, a navigation bar may shrink once the user begins to scroll a page.

Shrinking navigation bar
The left figure shows the navigation bar before scrolling with a large menu bar.
The right figure shows the shrunken navigation bar after scrolling.

The proposal does not yet define CSS markup or programming interfaces to express this use case.

#### 2.1.2. Navigation highlight effect

Similarly, it is common to trigger an animation at certain fixed points in a element’s scroll range. For example, a navigation bar that changes highlight based on the reader’s position within the document.

A navigation highlight effect
On the left, the “Abstract” section is scrolled into view and hence the abstract menu item is highlighted.
After scrolling down to the “Background” section (right), the background menu item fades in while the abstract menu item fades out.

The proposal does not yet define CSS markup or programming interfaces to express this use case.

### 2.2. Scroll-triggered style changes

The proposal does not yet define CSS markup or programming interfaces to express this use case.

### 2.3. Scroll-linked animations

#### 2.3.1. Scrollable picture-story show

Another pattern is an animation that tells a story where the user controls the progress of the animation by scrolling or some other gesture. This may be because the animation contains a lot of textual information which the user may wish to peruse more slowly, it may be for accessibility considerations to accommodate users who are uncomfortable with rapid animation, or it may simply be to allow the user to easily return to previous parts of the story such as a story that introduces a product where the user wishes to review previous information.

The following (simplified) example shows two balls colliding. The animation is controlled by scroll position allowing the user to easily rewind and replay the interaction.

A scrollable movie.
The left figure shows the initial position of the balls
The right figure shows them after they have collided.

Using the CSS markup:

    @media (prefers-reduced-motion: no-preference) {
      div.circle {
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-timeline: scroll(element(#container), vertical, "200px", "300px");
      }
      #left-circle {
        animation-name: left-circle;
      }
      #right-circle {
        animation-name: right-circle;
      }
      #union-circle {
        animation-name: union-circle;
        animation-timeline: scroll(element(#container), vertical, "250px", "300px");
      }
      @keyframes left-circle {
        to { transform: translate(300px) }
      }
      @keyframes right-circle {
        to { transform: translate(350px) }
      }
      @keyframes union-circle {
        to { opacity: 1 }
      }
    }

Using the programming interface, we might write this as:

    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      var circleTimeline = new ScrollTimeline({
        scrollSource: scrollableElement,
        scrollOffset: '200px',
        endScrollOffset: '300px'
      });

      var left = leftCircle.animate({ transform: 'translate(300px)' }, 1000);
      left.timeline = circleTimeline;

      var right = leftCircle.animate({ transform: 'translate(350px)' }, 1000);
      right.timeline = circleTimeline;

      var union = unionCircle.animate({ opacity: 1 }, 1000);
      union.timeline = new ScrollTimeline({
        scrollSource: scrollableElement,
        startScrollOffset: '250px',
        endScrollOffset: '300px'
      });
    }

#### 2.3.2. The content progress bar

Another common example of an animation that tracks scroll position is a progress bar that is used to indicate the reader’s position in a long article.

Content progress bar.
The left figure shows the initial state before scrolling.
The right figure shows the progress bar is half-filled in since the user has scrolled half way through the article.

Typically, the scroll bar provides this visual indication but applications may wish to hide the scroll bar for aesthetic or useability reasons.

Using the animation-timeline property, this example could be written as follows:

    @media (prefers-reduced-motion: no-preference) {
      @keyframes progress {
        to { width: 100%; }
      }
      #progress {
        width: 0px;
        height: 30px;
        background: red;
        animation: progress 1s linear;
        animation-timeline: scroll(element(#body));
      }
    }

If we use this API for this case, the example code will be as follow:

    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      var animation = div.animate({ width: '100%' }, 1000);
      animation.timeline = new ScrollTimeline(
        { startScrollOffset: '0px' }
      );
    }

### 2.4. Combination scroll and time-base animations

#### 2.4.1. Photo viewer

We are currently reworking this use case

## 3. Scroll-driven animations

### 3.1. Scroll timelines

#### 3.1.1. The `ScrollDirection` enumeration

    enum ScrollDirection {
      "block",
      "inline",
      "horizontal",
      "vertical"
    };

The `ScrollDirection` enumeration specifies a direction of scroll of a scrollable element.

`block`

  Selects the direction along the block axis, conforming to writing mode and directionality.

`inline`

  Selects the direction along the inline axis, confirming to writing mode and directionality.

`horizontal`

  Selects the physical horizontal direction (ignoring writing mode and directionality).

`vertical`

  Selects the physical vertical direction (ignoring writing mode and directionality).

Note: Having both logical (block/inline) and physical (vertical/horizontal) directions allows web developers to animate both logical (e.g. margin-inline-start) and physical (e.g. transform) properties with good behavior under different directionalities and writing modes.

#### 3.1.2. The `ScrollTimeline` interface

    enum ScrollTimelineAutoKeyword { "auto" };

    dictionary ScrollTimelineOptions {
      Element? scrollSource = null;
      ScrollDirection orientation = "block";
      DOMString startScrollOffset = "auto";
      DOMString endScrollOffset = "auto";
      (double or ScrollTimelineAutoKeyword) timeRange = "auto";
      FillMode fill = "none";
    };

    [Exposed=Window,
     Constructor(optional ScrollTimelineOptions options = {})]
    interface ScrollTimeline : AnimationTimeline {
      readonly attribute Element scrollSource;
      readonly attribute ScrollDirection orientation;
      readonly attribute DOMString startScrollOffset;
      readonly attribute DOMString endScrollOffset;
      readonly attribute (double or ScrollTimelineAutoKeyword) timeRange;
      readonly attribute FillMode fill;
    };

A scroll timeline is an `AnimationTimeline` whose time values are determined not by wall-clock time, but by the progress of scrolling in a scroll container.

`ScrollTimeline(options)`

  Creates a new `ScrollTimeline` object using the following procedure:

  1. Let timeline be a new `ScrollTimeline` object.

  2. Let source be the result corresponding to the first matching condition from below.

     If the scrollSource value of options is non-null,

       Let source be scrollSource

     Otherwise (scrollSource is null):

       Let source be the `scrollingElement` of the `Document` associated with the `Window` that is the current global object.

     Note: source may still be null after this step, e.g. if the `Document` has no `scrollingElement`.

  3. Set the `scrollSource` of timeline to source.

  4. Assign the `orientation`, `startScrollOffset`, `endScrollOffset`, `timeRange`, and `fill` properties of timeline to the corresponding value from options.

`scrollSource`, of type Element, readonly

  The scrollable element whose scrolling triggers the activation and drives the progress of the timeline.

`orientation`, of type ScrollDirection, readonly

  Determines the direction of scrolling which triggers the activation and drives the progress of the trigger.

`startScrollOffset`, of type DOMString, readonly

  A scroll offset, in the direction specified by `orientation`, which constitutes the beginning of the range in which the timeline is active.

  Recognized values are defined by the following grammar:

  >     auto | <length> | <percentage>

  The meaning of each value is as follows:

  auto

    The beginning of `scrollSource`'s scroll range in `orientation`.

  <length>

    An absolute distance along `scrollSource`'s scroll range in `orientation`.

  <percentage>

    A percentage distance along `scrollSource`'s scroll range in `orientation`.

`endScrollOffset`, of type DOMString, readonly

  A scroll offset, in the direction specified by `orientation`, which constitutes the end of the range in which the trigger is activated.

  Recognized values are defined by the following grammar:

  >     auto | <length> | <percentage>

  The meaning of each value is as follows:

  auto

    The end of `scrollSource`'s scroll range in `orientation`.

  <length>

    An absolute distance along `scrollSource`'s scroll range in `orientation`.

  <percentage>

    A percentage distance along `scrollSource`'s scroll range in `orientation`.

`timeRange`, of type `(double or ScrollTimelineAutoKeyword)`, readonly

  A time duration that allows mapping between a distance scrolled, and quantities specified in time units, such as an animation’s duration and start delay.

  Conceptually, `timeRange` represents the number of milliseconds to map to the scroll range defined by `startScrollOffset` and `endScrollOffset`. As a result, this value does not have a correspondence to wall-clock time.

  This value is used to compute the timeline’s effective time range, and the mapping is then defined by mapping the scroll distance from `startScrollOffset` to `endScrollOffset`, to the effective time range.

`fill`, of type FillMode, readonly

  Determines whether the timeline is active even when the scroll offset is outside the range defined by [`startScrollOffset`, `endScrollOffset`].

  Possible values are:

  none

    The timeline is inactive when the scroll offset is less than `startScrollOffset` or greater than or equal to `endScrollOffset`.

  forwards

    When the scroll offset is less than `startScrollOffset`, the timeline is inactive. When the scroll offset is greater than or equal to the `endScrollOffset`, the timeline’s current time is its effective time range.

  backwards

    When the scroll offset is less than `startScrollOffset`, the timeline’s current time is 0. When the scroll offset is greater than or equal to the `endScrollOffset`, the timeline is inactive.

  both

    When the scroll offset is less than `startScrollOffset`, the timeline’s current time is 0. When the scroll offset is greater than or equal to the `endScrollOffset`, the timeline’s current time is its effective time range.

  auto

    Behaves the same as `both`.

#### 3.1.3. The effective time range of a `ScrollTimeline`

The effective time range of a `ScrollTimeline` is calculated as follows:

If the `timeRange` has the value `"auto"`,

  The effective time range is the maximum value of the target effect end of all animations directly associated with this timeline.

  If any animation directly associated with the timeline has a target effect end of infinity, the effective time range is zero.

Otherwise,

  The effective time range is the `ScrollTimeline`'s `timeRange`.

#### 3.1.4. The current time of a `ScrollTimeline`

The current time of a `ScrollTimeline` is calculated as follows:

1. If `scrollSource` is null, does not currently have a CSS layout box, or if its layout box is not a scroll container, return an unresolved time value.

2. Otherwise, let current scroll offset be the current scroll offset of `scrollSource` in the direction specified by `orientation`.

3. If current scroll offset is less than `startScrollOffset`, return an unresolved time value if `fill` is `none` or `forwards`, or 0 otherwise.

4. If current scroll offset is greater than or equal to `endScrollOffset` then:

   If `endScrollOffset` is less than the maximum scroll offset of `scrollSource` in `orientation` and `fill` is `none` or `backwards`,

     return an unresolved time value.

   Otherwise,

     return the effective time range.

   Note: Checking for `endScrollOffset` being the maximum scroll offset ensures that the common case of a 'whole scroller' ScrollTimeline does not become inactive when you scroll to the end.

5. Return the result of evaluating the following expression:

   > `(current scroll offset - `startScrollOffset`) / (`endScrollOffset` - `startScrollOffset`) × effective time range`

### 3.2. The animation-timeline property

A `ScrollTimeline` may be applied to a CSS Animation [CSS3-ANIMATIONS] using the animation-timeline property.

Name: | animation-timeline
Value: | <single-animation-timeline>#
Initial: | auto
Applies to: | all elements, ::before and ::after pseudo-elements
Inherited: | none
Percentages: | N/A
Computed value: | As specified
Canonical order: | per grammar
Animatable: | no
Media: | interactive

<single-animation-timeline> = auto | scroll([element(<id-selector>)[, <scroll-direction>[, <scroll-offset>[, <scroll-offset>[, <time>[, <single-animation-fill-mode>]]]]]])

<scroll-direction> = auto | block | inline | horizontal | vertical

<scroll-offset> = <length> | <percentage> | auto

The animation-timeline property is similar to properties like animation-duration and animation-timing-function in that it can have one or more values, each one imparting additional behavior to a corresponding animation on the element, with the timelines matched up with animations as described here.

Each value has type <single-animation-timeline>, whose possible values have the following effects:

auto

  The animation’s timeline is a `DocumentTimeline`, more specifically the default document timeline.

scroll([element(<id-selector>)[, <scroll-direction>[, <scroll-offset>[, <scroll-offset>[, <time>[, <single-animation-fill-mode>]]]]]])

  The animation’s timeline is a `ScrollTimeline`.

  The timeline’s `scrollSource` is the scroll container identified by the <id-selector>, defaulting to the element’s nearest scrollable ancestor.

  The <scroll-direction>, if provided, determines the timeline’s `orientation`.

  The first <scroll-offset>, if provided, determines the timeline’s `startScrollOffset`.

  The second <scroll-offset>, if provided, determines the timeline’s `endScrollOffset`.

  The <time> value, if specified, determines the timeline’s `timeRange`.

  The <single-animation-fill-mode> value, if specified, determines the timeline’s `fill`.

### 3.3. Examples

Draw a reading progress bar along the top of the page as the user scrolls

    #progress {
      position: fixed;
      top: 0;
      width: 0;
      height: 2px;
      background-color: red;
    }

    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      let progress = document.getElementById("progress");
      let effect = new KeyframeEffect(
        progress,
        [
          { width: "0vw" },
          { width: "100vw" }
        ],
        {
          duration: 1000,
          easing: "linear"
        });
      let timeline = new ScrollTimeline({
        trigger: new ScrollTrigger({
          scrollSource: document.documentElement,
          orientation: "vertical",
          kind: "range"
        });
      });
      let animation = new Animation(effect, timeline);
      animation.play();
    }

The same thing with CSS, using animation-timeline

    @media (prefers-reduced-motion: no-preference) {
      @keyframes progress {
        from {
          width: 0vw;
        }
        to {
          width: 100vw;
        }
      }
      #progress {
        position: fixed;
        top: 0;
        width: 0;
        height: 2px;
        background-color: red;
        animation-name: progress;
        animation-duration: 1s;
        animation-timing-function: linear;
        /* Assume the HTML element has id 'root' */
        animation-timeline: scroll(element(#root), vertical);
      }
    }

## 4. Avoiding cycles with layout

The ability for scrolling to drive the progress of an animation, gives rise to the possibility of layout cycles, where a change to a scroll offset causes an animation’s effect to update, which in turn causes a new change to the scroll offset.

To avoid such cycles, animations with a `ScrollTimeline` are sampled once per frame, after scrolling in response to input events has taken place, but before `requestAnimationFrame()` callbacks are run. If the sampling of such an animation causes a change to a scroll offset, the animation will not be re-sampled to reflect the new offset until the next frame.

The implication of this is that in some situations, in a given frame, the rendered scroll offset of a scroll container may not be consistent with the state of an animation driven by scrolling that scroll container. However, this will only occur in situations where the animation’s effect changes the scroll offset of that same scroll container (in other words, in situations where the animation’s author is asking for trouble). In normal situations, including - importantly - when scrolling happens in response to input events, the rendered scroll offset and the state of scroll-driven animations will be consistent in each frame.

User agents that composite frames asynchronously with respect to layout and/or script may, at their discretion, sample scroll-driven animations once per composited frame, rather than (or in addition to) once per full layout cycle. Again, if sampling such an animation causes a change to a scroll offset, the animation will not be re-sampled to reflect the new offset until the next frame.

Nothing in this section is intended to require that scrolling block on layout or script. If a user agent normally composites frames where scrolling has occurred but the consequences of scrolling have not been fully propagated in layout or script (for example, `scroll` event listeners have not yet run), the user agent may likewise choose not to sample scroll-driven animations for that composited frame. In such cases, the rendered scroll offset and the state of a scroll-driven animation may be inconsistent in the composited frame.

## 5. Scroll-triggered (but time-driven) animations

An earlier draft of this proposal also provided for animations whose progress was driven by time (as with existing animations), but whose activation was triggered by scrolling past a certain scroll offset or into a given scroll range.

The main objective was to allow triggering the animation from the compositor thread. (The objective of scroll-linked animations is to make sure that the animation is in sync with the scroll position on each composited frame. If the triggering doesn’t happen on the compositor thread, then it’s possible that for a few frames the visual scroll position is such that the animation should have started, but it has not in fact started yet because the main thread, which is doing the triggering, is lagging behind.)

However, we found that in the vast majority of cases where a web author would want to do this, they would want to do it for a CSS transition (as opposed to a CSS animation). Unfortunately, it’s not possible to trigger CSS transitions from the compositor thread (because triggering a transition requires style resolution, which cannot be performed on the compositor thread). Given the extent to which triggering complicated the API, we decided it wasn’t worth it if you can’t use it for transitions, so this feature was removed.

The design space for triggering animations is still open. We welcome input on this subject.

## Appendix A. Considerations for Security and Privacy

This appendix is informative.

There are no known security or privacy impacts of this feature.

The W3C TAG is developing a Self-Review Questionnaire: Security and Privacy for editors of specifications to informatively answer.

Per the Questions to Consider

1. Does this specification deal with personally-identifiable information?

   No.

2. Does this specification deal with high-value data?

   No.

3. Does this specification introduce new state for an origin that persists across browsing sessions?

   No.

4. Does this specification expose persistent, cross-origin state to the web?

   No.

5. Does this specification expose any other data to an origin that it doesn’t currently have access to?

   No.

6. Does this specification enable new script execution/loading mechanisms?

   No.

7. Does this specification allow an origin access to a user’s location?

   No.

8. Does this specification allow an origin access to sensors on a user’s device?

   No.

9. Does this specification allow an origin access to aspects of a user’s local computing environment?

   No.

10. Does this specification allow an origin access to other devices?

    No.

11. Does this specification allow an origin some measure of control over a user agent’s native UI?

    No.

12. Does this specification expose temporary identifiers to the web?

    No.

13. Does this specification distinguish between behavior in first-party and third-party contexts?

    No.

14. How should this specification work in the context of a user agent’s "incognito" mode?

    No differently. The website should not be able to determine that the user is in an "incognito" mode using scroll-linked animations.

15. Does this specification persist data to a user’s local device?

    No.

16. Does this specification have a "Security Considerations" and "Privacy Considerations" section?

    Yes.

17. Does this specification allow downgrading default security characteristics?

    No.

## Conformance

### Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with `class="example"`, like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with `class="note"`, like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with `<strong class="advisement">`, like this: UAs MUST provide an accessible alternative.

### Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
  A CSS style sheet.
renderer
  A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
  A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

### Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

#### Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

#### Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

#### Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

## Index

### Terms defined by this specification

- animation-timeline, in §3.2
- "auto", in §3.1.2
- "block", in §3.1.1
- effective time range, in §3.1.3
- endScrollOffset
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- fill
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- "horizontal", in §3.1.1
- "inline", in §3.1.1
- layout cycles, in §4
- orientation
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- <scroll-direction>, in §3.2
- ScrollDirection, in §3.1.1
- <scroll-offset>, in §3.2
- scrollSource
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- scroll timeline, in §3.1.2
- ScrollTimeline, in §3.1.2
- ScrollTimelineAutoKeyword, in §3.1.2
- ScrollTimeline(options), in §3.1.2
- ScrollTimelineOptions, in §3.1.2
- <single-animation-timeline>, in §3.2
- startScrollOffset
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- timeRange
  - attribute for ScrollTimeline, in §3.1.2
  - dict-member for ScrollTimelineOptions, in §3.1.2
- "vertical", in §3.1.1

https://drafts.csswg.org/css-overflow-3/#scroll-container Referenced in:

- 3.1.2. The ScrollTimeline interface
- 3.1.4. The current time of a ScrollTimeline
- 3.2. The animation-timeline property

https://drafts.csswg.org/css-values-3/#length-value Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4)
- 3.2. The animation-timeline property

https://drafts.csswg.org/css-values-3/#percentage-value Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4)
- 3.2. The animation-timeline property

https://drafts.csswg.org/css-values-4/#mult-comma Referenced in:

- 3.2. The animation-timeline property

https://drafts.csswg.org/css-values-4/#time-value Referenced in:

- 3.2. The animation-timeline property (2) (3)

https://drafts.csswg.org/css-values-4/#comb-one Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4)

https://drafts.csswg.org/css-writing-modes-4/#block-axis Referenced in:

- 3.1.1. The ScrollDirection enumeration

https://drafts.csswg.org/css-writing-modes-4/#inline-axis Referenced in:

- 3.1.1. The ScrollDirection enumeration

https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode Referenced in:

- 3.2. The animation-timeline property (2) (3)

https://drafts.csswg.org/css-animations-1/#propdef-animation-duration Referenced in:

- 3.2. The animation-timeline property

https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function Referenced in:

- 3.2. The animation-timeline property

https://drafts.csswg.org/cssom-view/#css-layout-box Referenced in:

- 3.1.4. The current time of a ScrollTimeline

https://drafts.csswg.org/cssom-view-1/#dom-document-scrollingelement Referenced in:

- 3.1.2. The ScrollTimeline interface (2)

https://dom.spec.whatwg.org/#document Referenced in:

- 3.1.2. The ScrollTimeline interface (2)

https://dom.spec.whatwg.org/#element Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3)

https://html.spec.whatwg.org/multipage/window-object.html#window Referenced in:

- 3.1.2. The ScrollTimeline interface

https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object Referenced in:

- 3.1.2. The ScrollTimeline interface

https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window Referenced in:

- 3.1.2. The ScrollTimeline interface

https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe Referenced in:

- 4. Avoiding cycles with layout

https://drafts.csswg.org/selectors-4/#typedef-id-selector Referenced in:

- 3.2. The animation-timeline property (2) (3)

https://drafts.csswg.org/web-animations-1/#animationtimeline Referenced in:

- 3.1.2. The ScrollTimeline interface (2)

https://drafts.csswg.org/web-animations-1/#documenttimeline Referenced in:

- 3.2. The animation-timeline property

https://drafts.csswg.org/web-animations-1/#enumdef-fillmode Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3)

https://w3c.github.io/web-animations/#concept-animation Referenced in:

- 1.1. Relationship to other specifications
- 3.2. The animation-timeline property

https://w3c.github.io/web-animations/#current-time Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4)
- 3.1.4. The current time of a ScrollTimeline

https://w3c.github.io/web-animations/#default-document-timeline Referenced in:

- 3.2. The animation-timeline property

https://w3c.github.io/web-animations/#duration Referenced in:

- 3.1.2. The ScrollTimeline interface

https://w3c.github.io/web-animations/#start-delay Referenced in:

- 3.1.2. The ScrollTimeline interface

https://w3c.github.io/web-animations/#target-effect-end Referenced in:

- 3.1.3. The effective time range of a ScrollTimeline (2)

https://w3c.github.io/web-animations/#timeline Referenced in:

- 1.1. Relationship to other specifications (2)
- 3.2. The animation-timeline property (2)

https://heycam.github.io/webidl/#idl-DOMString Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4) (5) (6)

https://heycam.github.io/webidl/#Exposed Referenced in:

- 3.1.2. The ScrollTimeline interface

https://heycam.github.io/webidl/#idl-double Referenced in:

- 3.1.2. The ScrollTimeline interface (2)

### Terms defined by reference

- [css-overflow-3] defines the following terms:
  - scroll container
- [css-values-3] defines the following terms:
  - <length>
  - <percentage>
- [css-values-4] defines the following terms:
  - #
  - <time>
  - |
- [css-writing-modes-4] defines the following terms:
  - block axis
  - inline axis
- [CSS3-ANIMATIONS] defines the following terms:
  - <single-animation-fill-mode>
  - animation-duration
  - animation-timing-function
- [cssom-view-1] defines the following terms:
  - css layout box
  - scrollingElement
- [DOM] defines the following terms:
  - Document
  - Element
- [HTML] defines the following terms:
  - Window
  - current global object
  - document associated with a window
  - requestAnimationFrame(callback)
- [selectors-4] defines the following terms:
  - <id-selector>
- [WEB-ANIMATIONS-1] defines the following terms:
  - AnimationTimeline
  - DocumentTimeline
  - FillMode
  - animation
  - current time
  - default document timeline
  - duration
  - start delay
  - target effect end
  - timeline
- [WebIDL] defines the following terms:
  - DOMString
  - Exposed
  - double

## References

### Normative References

[CSS-OVERFLOW-3]
  David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 31 July 2018. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-VALUES-3]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 31 January 2019. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
  Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 31 January 2019. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
  Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 24 May 2018. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS3-ANIMATIONS]
  Dean Jackson; et al. CSS Animations Level 1. 11 October 2018. WD. URL: https://www.w3.org/TR/css-animations-1/
[CSSOM-VIEW-1]
  Simon Pieters. CSSOM View Module. 17 March 2016. WD. URL: https://www.w3.org/TR/cssom-view-1/
[DOM]
  Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
  Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[RFC2119]
  S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[SELECTORS-4]
  Elika Etemad; Tab Atkins Jr.. Selectors Level 4. 21 November 2018. WD. URL: https://www.w3.org/TR/selectors-4/
[WEB-ANIMATIONS-1]
  Brian Birtles; et al. Web Animations. 11 October 2018. WD. URL: https://www.w3.org/TR/web-animations-1/
[WebIDL]
  Boris Zbarsky. Web IDL. 15 December 2016. ED. URL: https://heycam.github.io/webidl/

## Property Index

Name | Value | Initial | Applies to | Inh. | %ages | Animatable | Canonical order | Computed value | Media
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
animation-timeline | <single-animation-timeline># | auto | all elements, ::before and ::after pseudo-elements | none | N/A | no | per grammar | As specified | interactive

## IDL Index

    enum ScrollDirection {
      "block",
      "inline",
      "horizontal",
      "vertical"
    };

    enum ScrollTimelineAutoKeyword { "auto" };

    dictionary ScrollTimelineOptions {
      Element? scrollSource = null;
      ScrollDirection orientation = "block";
      DOMString startScrollOffset = "auto";
      DOMString endScrollOffset = "auto";
      (double or ScrollTimelineAutoKeyword) timeRange = "auto";
      FillMode fill = "none";
    };

    [Exposed=Window,
     Constructor(optional ScrollTimelineOptions options = {})]
    interface ScrollTimeline : AnimationTimeline {
      readonly attribute Element scrollSource;
      readonly attribute ScrollDirection orientation;
      readonly attribute DOMString startScrollOffset;
      readonly attribute DOMString endScrollOffset;
      readonly attribute (double or ScrollTimelineAutoKeyword) timeRange;
      readonly attribute FillMode fill;
    };

#enumdef-scrolldirection Referenced in:

- 3.1.1. The ScrollDirection enumeration (2)
- 3.1.2. The ScrollTimeline interface (2) (3)

#enumdef-scrolltimelineautokeyword Referenced in:

- 3.1.2. The ScrollTimeline interface (2)

#dictdef-scrolltimelineoptions Referenced in:

- 3.1.2. The ScrollTimeline interface

#scrolltimeline Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3)
- 3.1.3. The effective time range of a ScrollTimeline (2) (3)
- 3.1.4. The current time of a ScrollTimeline (2)
- 3.2. The animation-timeline property (2)
- 4. Avoiding cycles with layout

#scroll-timeline Referenced in:

- 1.1. Relationship to other specifications

#dom-scrolltimeline-scrollsource Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4) (5) (6) (7) (8)
- 3.1.4. The current time of a ScrollTimeline (2) (3)
- 3.2. The animation-timeline property

#dom-scrolltimeline-orientation Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4) (5) (6) (7) (8) (9) (10)
- 3.1.4. The current time of a ScrollTimeline (2)
- 3.2. The animation-timeline property

#dom-scrolltimeline-startscrolloffset Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4) (5) (6) (7) (8) (9)
- 3.1.4. The current time of a ScrollTimeline (2) (3)
- 3.2. The animation-timeline property

#dom-scrolltimeline-endscrolloffset Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4) (5) (6) (7) (8) (9)
- 3.1.4. The current time of a ScrollTimeline (2) (3) (4)
- 3.2. The animation-timeline property

#dom-scrolltimeline-timerange Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3)
- 3.1.3. The effective time range of a ScrollTimeline (2)
- 3.2. The animation-timeline property

#dom-scrolltimeline-fill Referenced in:

- 3.1.2. The ScrollTimeline interface (2)
- 3.1.4. The current time of a ScrollTimeline (2)
- 3.2. The animation-timeline property

#effective-time-range Referenced in:

- 3.1.2. The ScrollTimeline interface (2) (3) (4)
- 3.1.3. The effective time range of a ScrollTimeline (2) (3)
- 3.1.4. The current time of a ScrollTimeline (2)

#propdef-animation-timeline Referenced in:

- 2.3.2. The content progress bar
- 3.2. The animation-timeline property (2) (3)
- 3.3. Examples

#typedef-single-animation-timeline Referenced in:

- 3.2. The animation-timeline property (2)

#typedef-scroll-direction Referenced in:

- 3.2. The animation-timeline property (2) (3)

#typedef-scroll-offset Referenced in:

- 3.2. The animation-timeline property (2) (3) (4) (5) (6)