index.html

<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Scroll-linked Animations</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="UD" name="w3c-status">
  <meta content="Defines an API and markup for creating animations that are either            triggered by or tied to the scroll offset of a scroll container." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-UD" rel="stylesheet" type="text/css">
  <meta content="Bikeshed version e86d5b1b47a216fa66165c234892adc259212183" name="generator">
  <link href="https://wicg.github.io/scroll-animations/" rel="canonical">
  <meta content="ff6d3dbe181e4ea61675c58f934a53cdcf2b207d" name="document-revision">
  <link href="web-animations.css" rel="stylesheet" type="text/css">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Scroll-linked Animations</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Unofficial Proposal Draft, <time class="dt-updated" datetime="2019-09-27">27 September 2019</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/scroll-animations/">https://wicg.github.io/scroll-animations/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Brian Birtles &lt;bbirtles@mozilla.com></span>
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Botond Ballo &lt;botond@mozilla.com></span>
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Stephen McGruer &lt;smcgruer@google.com></span>
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Antoine Quint &lt;graouts@apple.com></span>
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Mantaroh Yoshinaga</span>
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/scroll-animations/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/csswg-drafts/labels/scroll-animations">GitHub Issues</a>
     <dd><a href="https://github.com/WICG/scroll-animations/issues">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2019 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Defines an API and markup for creating animations that are either

          triggered by or tied to the scroll offset of a scroll container.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#other-specs"><span class="secno">1.1</span> <span class="content">Relationship to other specifications</span></a>
      <li><a href="#async-scrolling"><span class="secno">1.2</span> <span class="content">Relationship to asynchronous scrolling</span></a>
     </ol>
    <li>
     <a href="#use-cases"><span class="secno">2</span> <span class="content">Use cases</span></a>
     <ol class="toc">
      <li>
       <a href="#scroll-triggered-animations-usecases"><span class="secno">2.1</span> <span class="content">Scroll-triggered animations</span></a>
       <ol class="toc">
        <li><a href="#navigation-bar-shrinking-effect"><span class="secno">2.1.1</span> <span class="content">Navigation bar shrinking effect</span></a>
        <li><a href="#navigation-highlight-effect"><span class="secno">2.1.2</span> <span class="content">Navigation highlight effect</span></a>
       </ol>
      <li><a href="#scroll-triggered-style-changes-usecase"><span class="secno">2.2</span> <span class="content">Scroll-triggered style changes</span></a>
      <li>
       <a href="#scroll-linked-animations-usecase"><span class="secno">2.3</span> <span class="content">Scroll-linked animations</span></a>
       <ol class="toc">
        <li><a href="#scrollable-animation-usecase"><span class="secno">2.3.1</span> <span class="content">Scrollable picture-story show</span></a>
        <li><a href="#content-progress-bar-usecase"><span class="secno">2.3.2</span> <span class="content">The content progress bar</span></a>
       </ol>
      <li>
       <a href="#combination-scroll-and-time-base-animations-usecase"><span class="secno">2.4</span> <span class="content">Combination scroll and time-base animations</span></a>
       <ol class="toc">
        <li><a href="#movie-show-case-usecase"><span class="secno">2.4.1</span> <span class="content">Photo viewer</span></a>
       </ol>
     </ol>
    <li>
     <a href="#scroll-driven-animations"><span class="secno">3</span> <span class="content">Scroll-driven animations</span></a>
     <ol class="toc">
      <li>
       <a href="#scroll-timelines"><span class="secno">3.1</span> <span class="content">Scroll timelines</span></a>
       <ol class="toc">
        <li><a href="#scrolldirection-enumeration"><span class="secno">3.1.1</span> <span class="content">The <code class="idl"><span>ScrollDirection</span></code> enumeration</span></a>
        <li><a href="#scrolltimeline-interface"><span class="secno">3.1.2</span> <span class="content">The <code class="idl"><span>ScrollTimeline</span></code> interface</span></a>
        <li><a href="#efffective-time-range-algorithm"><span class="secno">3.1.3</span> <span class="content">The effective time range of a <code class="idl"><span>ScrollTimeline</span></code></span></a>
        <li><a href="#current-time-algorithm"><span class="secno">3.1.4</span> <span class="content">The current time of a <code class="idl"><span>ScrollTimeline</span></code></span></a>
       </ol>
      <li><a href="#animation-timeline"><span class="secno">3.2</span> <span class="content">The <span class="property">animation-timeline</span> property</span></a>
      <li><a href="#timeline-examples"><span class="secno">3.3</span> <span class="content">Examples</span></a>
     </ol>
    <li><a href="#avoiding-cycles"><span class="secno">4</span> <span class="content">Avoiding cycles with layout</span></a>
    <li><a href="#scroll-triggered-animations"><span class="secno">5</span> <span class="content">Scroll-triggered (but time-driven) animations</span></a>
    <li><a href="#appendix-a-considerations-for-security-and-privacy"><span class="secno"></span> <span class="content">Appendix A. Considerations for Security and Privacy</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>This specification defines mechanisms for <a href="#scroll-driven-animations">driving the progress of an animation</a> based
on the scroll progress of a scroll container.</p>
   <h3 class="heading settled" data-level="1.1" id="other-specs"><span class="secno">1.1. </span><span class="content">Relationship to other specifications</span><a class="self-link" href="#other-specs"></a></h3>
   <p>Web Animations <a data-link-type="biblio" href="#biblio-web-animations-1">[WEB-ANIMATIONS-1]</a> defines an abstract conceptual model for
animations on the Web platform, with elements of the model including <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#concept-animation" id="ref-for-concept-animation">animations</a> and their <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#timeline" id="ref-for-timeline">timelines</a>,
and associated programming interfaces.</p>
   <p>This specification extends this model by defining a new type of animation <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#timeline" id="ref-for-timeline①">timeline</a>:
a <a data-link-type="dfn" href="#scroll-timeline" id="ref-for-scroll-timeline">scroll timeline</a>.</p>
   <p>This specification defines both programming interfaces for interacting with these
concepts, as well as CSS markup which applies these concepts to CSS Animations <a data-link-type="biblio" href="#biblio-css3-animations">[CSS3-ANIMATIONS]</a>.</p>
   <p>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.</p>
   <h3 class="heading settled" data-level="1.2" id="async-scrolling"><span class="secno">1.2. </span><span class="content">Relationship to asynchronous scrolling</span><a class="self-link" href="#async-scrolling"></a></h3>
   <p>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.</p>
   <p>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.</p>
   <h2 class="heading settled" data-level="2" id="use-cases"><span class="secno">2. </span><span class="content">Use cases</span><a class="self-link" href="#use-cases"></a></h2>
   <p><em>This section is non-normative</em></p>
   <p class="note" role="note"><span>Note:</span> Based on this <a href="https://github.com/WICG/scroll-animations/blob/master/Use%20cases.md">curated
list of use cases</a>.</p>
   <h3 class="heading settled" data-level="2.1" id="scroll-triggered-animations-usecases"><span class="secno">2.1. </span><span class="content">Scroll-triggered animations</span><a class="self-link" href="#scroll-triggered-animations-usecases"></a></h3>
   <h4 class="heading settled" data-level="2.1.1" id="navigation-bar-shrinking-effect"><span class="secno">2.1.1. </span><span class="content">Navigation bar shrinking effect</span><a class="self-link" href="#navigation-bar-shrinking-effect"></a></h4>
   <p>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.</p>
   <figure>
     <img alt="Use case: Shrinking navigation bar" src="img/usecase1-2.svg" width="600"> 
    <figcaption> Shrinking navigation bar<br> The left figure shows the navigation bar before scrolling with
  a large menu bar.<br> The right figure shows the shrunken navigation bar after scrolling. </figcaption>
   </figure>
   <p><strong class="advisement"> The proposal does not yet define CSS markup or programming
            interfaces to express this use case.</strong></p>
   <h4 class="heading settled" data-level="2.1.2" id="navigation-highlight-effect"><span class="secno">2.1.2. </span><span class="content">Navigation highlight effect</span><a class="self-link" href="#navigation-highlight-effect"></a></h4>
   <p>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.</p>
   <figure>
     <img alt="Use case: A navigation highlight effect." src="img/usecase1-1.svg" width="600"> 
    <figcaption> A navigation highlight effect<br> On the left, the “Abstract” section is scrolled into view
  and hence the abstract menu item is highlighted.<br> After scrolling down to the “Background” section (right),
  the background menu item fades in while the abstract menu item fades
  out. </figcaption>
   </figure>
   <p><strong class="advisement"> The proposal does not yet define CSS markup or programming
            interfaces to express this use case.</strong></p>
   <h3 class="heading settled" data-level="2.2" id="scroll-triggered-style-changes-usecase"><span class="secno">2.2. </span><span class="content">Scroll-triggered style changes</span><a class="self-link" href="#scroll-triggered-style-changes-usecase"></a></h3>
   <p><strong class="advisement"> The proposal does not yet define CSS markup or programming
            interfaces to express this use case.</strong></p>
   <h3 class="heading settled" data-level="2.3" id="scroll-linked-animations-usecase"><span class="secno">2.3. </span><span class="content">Scroll-linked animations</span><a class="self-link" href="#scroll-linked-animations-usecase"></a></h3>
   <h4 class="heading settled" data-level="2.3.1" id="scrollable-animation-usecase"><span class="secno">2.3.1. </span><span class="content">Scrollable picture-story show</span><a class="self-link" href="#scrollable-animation-usecase"></a></h4>
   <p>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.</p>
   <p>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.</p>
   <figure>
     <img alt="Use case: The picture-story show." src="img/usecase3-1.svg" width="600"> 
    <figcaption> A scrollable movie.<br> The left figure shows the initial position of the balls<br> The right figure shows them after they have collided. </figcaption>
   </figure>
   <p>Using the CSS markup:</p>
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
  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 }
  }
}
</pre>
   <p>Using the programming interface, we might write this as:</p>
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
  <c- a>var</c-> circleTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
    scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
    scrollOffset<c- o>:</c-> <c- t>'200px'</c-><c- p>,</c->
    endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
  <c- p>});</c->

  <c- a>var</c-> left <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(300px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
  left<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->

  <c- a>var</c-> right <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(350px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
  right<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->

  <c- a>var</c-> union <c- o>=</c-> unionCircle<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>1</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
  union<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
    scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
    startScrollOffset<c- o>:</c-> <c- t>'250px'</c-><c- p>,</c->
    endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   <h4 class="heading settled" data-level="2.3.2" id="content-progress-bar-usecase"><span class="secno">2.3.2. </span><span class="content">The content progress bar</span><a class="self-link" href="#content-progress-bar-usecase"></a></h4>
   <p>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.</p>
   <figure>
     <img alt="Use case: Scroll based styling" src="img/usecase3-2.svg" width="600"> 
    <figcaption> Content progress bar.<br> The left figure shows the initial state before scrolling.<br> The right figure shows the progress bar is half-filled in since the
  user has scrolled half way through the article. </figcaption>
   </figure>
   <p>Typically, the scroll bar provides this visual indication but
applications may wish to hide the scroll bar for aesthetic or useability
reasons.</p>
   <p>Using the <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline">animation-timeline</a> property, this example could be written
as follows:</p>
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
  <c- n>@keyframes</c-> progress <c- p>{</c->
    <c- f>to </c-><c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>%</c-><c- p>;</c-> <c- p>}</c->
  <c- p>}</c->
  #progress {
    width: 0px;
    height: 30px;
    background: red;
    animation: progress 1s linear;
    animation-timeline: scroll(element(#body));
  }
}
</pre>
   <p>If we use this API for this case, the example code will be as follow:</p>
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
  <c- a>var</c-> animation <c- o>=</c-> div<c- p>.</c->animate<c- p>({</c-> width<c- o>:</c-> <c- t>'100%'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
  animation<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->
    <c- p>{</c-> startScrollOffset<c- o>:</c-> <c- t>'0px'</c-> <c- p>}</c->
  <c- p>);</c->
<c- p>}</c->
</pre>
   <h3 class="heading settled" data-level="2.4" id="combination-scroll-and-time-base-animations-usecase"><span class="secno">2.4. </span><span class="content">Combination scroll and time-base animations</span><a class="self-link" href="#combination-scroll-and-time-base-animations-usecase"></a></h3>
   <h4 class="heading settled" data-level="2.4.1" id="movie-show-case-usecase"><span class="secno">2.4.1. </span><span class="content">Photo viewer</span><a class="self-link" href="#movie-show-case-usecase"></a></h4>
   <p><strong class="advisement"> We are currently reworking this use case</strong></p>
   <h2 class="heading settled" data-level="3" id="scroll-driven-animations"><span class="secno">3. </span><span class="content">Scroll-driven animations</span><a class="self-link" href="#scroll-driven-animations"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="scroll-timelines"><span class="secno">3.1. </span><span class="content">Scroll timelines</span><a class="self-link" href="#scroll-timelines"></a></h3>
   <h4 class="heading settled" data-level="3.1.1" id="scrolldirection-enumeration"><span class="secno">3.1.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection">ScrollDirection</a></code> enumeration</span><a class="self-link" href="#scrolldirection-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-scrolldirection"><code><c- g>ScrollDirection</c-></code></dfn> {
  <dfn class="idl-code" data-dfn-for="ScrollDirection" data-dfn-type="enum-value" data-export id="dom-scrolldirection-block"><code><c- s>"block"</c-></code><a class="self-link" href="#dom-scrolldirection-block"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="ScrollDirection" data-dfn-type="enum-value" data-export id="dom-scrolldirection-inline"><code><c- s>"inline"</c-></code><a class="self-link" href="#dom-scrolldirection-inline"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="ScrollDirection" data-dfn-type="enum-value" data-export id="dom-scrolldirection-horizontal"><code><c- s>"horizontal"</c-></code><a class="self-link" href="#dom-scrolldirection-horizontal"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="ScrollDirection" data-dfn-type="enum-value" data-export id="dom-scrolldirection-vertical"><code><c- s>"vertical"</c-></code><a class="self-link" href="#dom-scrolldirection-vertical"></a></dfn>
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection①">ScrollDirection</a></code> enumeration specifies a direction of scroll of a
scrollable element.</p>
   <dl>
    <dt data-md><code>block</code>
    <dd data-md>
     <p>Selects the direction along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a>, conforming to writing mode
and directionality.</p>
    <dt data-md><code>inline</code>
    <dd data-md>
     <p>Selects the direction along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a>, confirming to writing mode
and directionality.</p>
    <dt data-md><code>horizontal</code>
    <dd data-md>
     <p>Selects the physical horizontal direction (ignoring writing mode and
directionality).</p>
    <dt data-md><code>vertical</code>
    <dd data-md>
     <p>Selects the physical vertical direction (ignoring writing mode and
directionality).</p>
   </dl>
   <p class="note" role="note"><span>Note:</span> 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.</p>
   <h4 class="heading settled" data-level="3.1.2" id="scrolltimeline-interface"><span class="secno">3.1.2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline">ScrollTimeline</a></code> interface</span><a class="self-link" href="#scrolltimeline-interface"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-scrolltimelineautokeyword"><code><c- g>ScrollTimelineAutoKeyword</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="ScrollTimelineAutoKeyword" data-dfn-type="enum-value" data-export id="dom-scrolltimelineautokeyword-auto"><code><c- s>"auto"</c-></code><a class="self-link" href="#dom-scrolltimelineautokeyword-auto"></a></dfn> };

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-scrolltimelineoptions"><code><c- g>ScrollTimelineOptions</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>? <dfn class="idl-code" data-default="null" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="Element? " id="dom-scrolltimelineoptions-scrollsource"><code><c- g>scrollSource</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-scrollsource"></a></dfn> = <c- b>null</c->;
  <a class="n" data-link-type="idl-name" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection②"><c- n>ScrollDirection</c-></a> <dfn class="idl-code" data-default="&quot;block&quot;" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="ScrollDirection " id="dom-scrolltimelineoptions-orientation"><code><c- g>orientation</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-orientation"></a></dfn> = "block";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;auto&quot;" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-scrolltimelineoptions-startscrolloffset"><code><c- g>startScrollOffset</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-startscrolloffset"></a></dfn> = "auto";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;auto&quot;" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-scrolltimelineoptions-endscrolloffset"><code><c- g>endScrollOffset</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-endscrolloffset"></a></dfn> = "auto";
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolltimelineautokeyword" id="ref-for-enumdef-scrolltimelineautokeyword"><c- n>ScrollTimelineAutoKeyword</c-></a>) <dfn class="idl-code" data-default="&quot;auto&quot;" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="(double or ScrollTimelineAutoKeyword) " id="dom-scrolltimelineoptions-timerange"><code><c- g>timeRange</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-timerange"></a></dfn> = "auto";
  <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode" id="ref-for-enumdef-fillmode"><c- n>FillMode</c-></a> <dfn class="idl-code" data-default="&quot;none&quot;" data-dfn-for="ScrollTimelineOptions" data-dfn-type="dict-member" data-export data-type="FillMode " id="dom-scrolltimelineoptions-fill"><code><c- g>fill</c-></code><a class="self-link" href="#dom-scrolltimelineoptions-fill"></a></dfn> = "none";
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 <a class="idl-code" data-link-type="constructor" href="#dom-scrolltimeline-scrolltimeline" id="ref-for-dom-scrolltimeline-scrolltimeline"><c- g>Constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-scrolltimelineoptions" id="ref-for-dictdef-scrolltimelineoptions"><c- n>ScrollTimelineOptions</c-></a> <dfn class="idl-code" data-dfn-for="ScrollTimeline/ScrollTimeline(options)" data-dfn-type="argument" data-export id="dom-scrolltimeline-scrolltimeline-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-scrolltimeline-scrolltimeline-options-options"></a></dfn> = {})]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="scrolltimeline"><code><c- g>ScrollTimeline</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline"><c- n>AnimationTimeline</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource"><c- g>scrollSource</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection③"><c- n>ScrollDirection</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="ScrollDirection" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation"><c- g>orientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset"><c- g>startScrollOffset</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset"><c- g>endScrollOffset</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolltimelineautokeyword" id="ref-for-enumdef-scrolltimelineautokeyword①"><c- n>ScrollTimelineAutoKeyword</c-></a>) <a class="idl-code" data-link-type="attribute" data-readonly data-type="(double or ScrollTimelineAutoKeyword)" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange"><c- g>timeRange</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode" id="ref-for-enumdef-fillmode①"><c- n>FillMode</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FillMode" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill"><c- g>fill</c-></a>;
};
</pre>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-timeline">scroll timeline</dfn> is an <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline①">AnimationTimeline</a></code> whose time values are determined
not by wall-clock time, but by the progress of scrolling in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a>.</p>
   <div data-link-for-hint="ScrollTimeline">
    <div class="constructors">
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="constructor" data-export id="dom-scrolltimeline-scrolltimeline"><code>ScrollTimeline(options)</code></dfn>
      <dd data-md>
       <p>Creates a new <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline①">ScrollTimeline</a></code> object using the following procedure:</p>
       <ol>
        <li data-md>
         <p>Let <var>timeline</var> be a new <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline②">ScrollTimeline</a></code> object.</p>
        <li data-md>
         <p>Let <var>source</var> be the result corresponding to the first matching condition from below.</p>
         <dl>
          <dt data-md>If the <var>scrollSource</var> value of <var>options</var> is non-null,
          <dd data-md>
           <p>Let <var>source</var> be <var>scrollSource</var></p>
          <dt data-md>Otherwise (<var>scrollSource</var> is null):
          <dd data-md>
           <p>Let <var>source</var> be the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement">scrollingElement</a></code> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>.</p>
         </dl>
         <p class="note" role="note"><span>Note:</span> <var>source</var> may still be null after this step, e.g. if the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> has no <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement①">scrollingElement</a></code>.</p>
        <li data-md>
         <p>Set the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource①">scrollSource</a></code> of <var>timeline</var> to <var>source</var>.</p>
        <li data-md>
         <p>Assign the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation①">orientation</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset①">startScrollOffset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①">endScrollOffset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange①">timeRange</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill①">fill</a></code> properties of <var>timeline</var> to the corresponding value from <var>options</var>.</p>
       </ol>
     </dl>
    </div>
    <div class="attributes">
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-scrollsource"><code>scrollSource</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a>, readonly</span>
      <dd data-md>
       <p>The scrollable element whose scrolling triggers the activation and drives the
progress of the timeline.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-orientation"><code>orientation</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection④">ScrollDirection</a>, readonly</span>
      <dd data-md>
       <p>Determines the direction of scrolling which triggers the activation and drives
the progress of the trigger.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-startscrolloffset"><code>startScrollOffset</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④">DOMString</a>, readonly</span>
      <dd data-md>
       <p>A scroll offset, in the direction specified by <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation②">orientation</a></code>, which constitutes
the beginning of the range in which the timeline is active.</p>
       <p>Recognized values are defined by the following grammar:</p>
       <blockquote>
<pre class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a></pre>
       </blockquote>
       <p>The meaning of each value is as follows:</p>
       <dl>
        <dt data-md>auto
        <dd data-md>
         <p>The beginning of <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource②">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation③">orientation</a></code>.</p>
        <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>
        <dd data-md>
         <p>An absolute distance along <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource③">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation④">orientation</a></code>.</p>
        <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a>
        <dd data-md>
         <p>A percentage distance along <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource④">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation⑤">orientation</a></code>.</p>
       </dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-endscrolloffset"><code>endScrollOffset</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤">DOMString</a>, readonly</span>
      <dd data-md>
       <p>A scroll offset, in the direction specified by <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation⑥">orientation</a></code>, which constitutes
the end of the range in which the trigger is activated.</p>
       <p>Recognized values are defined by the following grammar:</p>
       <blockquote>
<pre class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a></pre>
       </blockquote>
       <p>The meaning of each value is as follows:</p>
       <dl>
        <dt data-md>auto
        <dd data-md>
         <p>The end of <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource⑤">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation⑦">orientation</a></code>.</p>
        <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>
        <dd data-md>
         <p>An absolute distance along <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource⑥">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation⑧">orientation</a></code>.</p>
        <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a>
        <dd data-md>
         <p>A percentage distance along <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource⑦">scrollSource</a></code>'s scroll range in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation⑨">orientation</a></code>.</p>
       </dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-timerange"><code>timeRange</code></dfn>, <span> of type <code class="idl-code">(double or ScrollTimelineAutoKeyword)</code>, readonly</span>
      <dd data-md>
       <p>A time duration that allows mapping between a distance scrolled, and
quantities specified in time units, such as an animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#duration" id="ref-for-duration">duration</a> and <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#start-delay" id="ref-for-start-delay">start delay</a>.</p>
       <p>Conceptually, <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange②">timeRange</a></code> represents the number of milliseconds to map to the
scroll range defined by <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset②">startScrollOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset②">endScrollOffset</a></code>. As a 
result, this value does not have a correspondence to wall-clock time.</p>
       <p>This value is used to compute the timeline’s <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range">effective time range</a>, and
the mapping is then defined by mapping the scroll distance from <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset③">startScrollOffset</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset③">endScrollOffset</a></code>, to the <span id="ref-for-effective-time-range①">effective time range</span>.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ScrollTimeline" data-dfn-type="attribute" data-export id="dom-scrolltimeline-fill"><code>fill</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode" id="ref-for-enumdef-fillmode②">FillMode</a>, readonly</span>
      <dd data-md>
       <p>Determines whether the timeline is active even when the scroll offset is outside
the range defined by [<code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset④">startScrollOffset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset④">endScrollOffset</a></code>].</p>
       <p>Possible values are:</p>
       <dl>
        <dt data-md>none
        <dd data-md>
         <p>The timeline is inactive when the scroll offset is less than <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset⑤">startScrollOffset</a></code> or greater than or equal to <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset⑤">endScrollOffset</a></code>.</p>
        <dt data-md>forwards
        <dd data-md>
         <p>When the scroll offset is less than <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset⑥">startScrollOffset</a></code>, the
timeline is inactive.
When the scroll offset is greater than or equal to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset⑥">endScrollOffset</a></code>, the timeline’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time" id="ref-for-current-time">current time</a> is its <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range②">effective time range</a>.</p>
        <dt data-md>backwards
        <dd data-md>
         <p>When the scroll offset is less than <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset⑦">startScrollOffset</a></code>, the
timeline’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time" id="ref-for-current-time①">current time</a> is 0.
When the scroll offset is greater than or equal to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset⑦">endScrollOffset</a></code>, the timeline is inactive.</p>
        <dt data-md>both
        <dd data-md>
         <p>When the scroll offset is less than <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset⑧">startScrollOffset</a></code>, the
timeline’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time" id="ref-for-current-time②">current time</a> is 0.
When the scroll offset is greater than or equal to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset⑧">endScrollOffset</a></code>, the timeline’s <span id="ref-for-current-time③">current time</span> is its <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range③">effective time range</a>.</p>
        <dt data-md>auto
        <dd data-md>
         <p>Behaves the same as <code>both</code>.</p>
       </dl>
     </dl>
    </div>
    <h4 class="heading settled" data-level="3.1.3" id="efffective-time-range-algorithm"><span class="secno">3.1.3. </span><span class="content">The effective time range of a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline③">ScrollTimeline</a></code></span><a class="self-link" href="#efffective-time-range-algorithm"></a></h4>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effective-time-range">effective time range</dfn> of a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline④">ScrollTimeline</a></code> is calculated as follows:</p>
    <div class="switch">
     <dl>
      <dt data-md>If the <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange③">timeRange</a></code> has the value <code>"auto"</code>,
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range④">effective time range</a> is the maximum value of the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect-end" id="ref-for-target-effect-end">target effect end</a> of all animations
directly associated with this timeline.</p>
       <p>If any animation directly associated with the timeline has a <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#target-effect-end" id="ref-for-target-effect-end①">target effect end</a> of infinity, the <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range⑤">effective time range</a> is zero.</p>
      <dt data-md>Otherwise,
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range⑥">effective time range</a> is the <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline⑤">ScrollTimeline</a></code>'s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange④">timeRange</a></code>.</p>
     </dl>
    </div>
    <h4 class="heading settled" data-level="3.1.4" id="current-time-algorithm"><span class="secno">3.1.4. </span><span class="content">The current time of a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline⑥">ScrollTimeline</a></code></span><a class="self-link" href="#current-time-algorithm"></a></h4>
    <p>The <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#current-time" id="ref-for-current-time④">current time</a> of a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline⑦">ScrollTimeline</a></code> is calculated
as follows:</p>
    <ol>
     <li data-md>
      <p>If <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource⑧">scrollSource</a></code> is null, does not currently have a <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view/#css-layout-box" id="ref-for-css-layout-box">CSS layout box</a>, or
if its layout box is not a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll container</a>, return an unresolved time value.</p>
     <li data-md>
      <p>Otherwise, let <var>current scroll offset</var> be the current scroll offset of <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource⑨">scrollSource</a></code> in the direction specified by <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation①⓪">orientation</a></code>.</p>
     <li data-md>
      <p>If <var>current scroll offset</var> is less than <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset⑨">startScrollOffset</a></code>, return an unresolved
time value if <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill②">fill</a></code> is <code>none</code> or <code>forwards</code>, or 0 otherwise.</p>
     <li data-md>
      <p>If <var>current scroll offset</var> is greater than or equal to <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset⑨">endScrollOffset</a></code> then:</p>
      <div class="switch">
       <dl>
        <dt data-md>If <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①⓪">endScrollOffset</a></code> is less than the maximum scroll offset of <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource①⓪">scrollSource</a></code> in <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation①①">orientation</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill③">fill</a></code> is <code>none</code> or <code>backwards</code>,
        <dd data-md>
         <p>return an unresolved time value.</p>
        <dt data-md>Otherwise,
        <dd data-md>
         <p>return the <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range⑦">effective time range</a>.</p>
       </dl>
      </div>
      <p class="note" role="note"><span>Note:</span> Checking for <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①①">endScrollOffset</a></code> 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.</p>
     <li data-md>
      <p>Return the result of evaluating the following expression:</p>
      <blockquote> <code>(<var>current scroll offset</var> - <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset①⓪">startScrollOffset</a></code>) / (<code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①②">endScrollOffset</a></code> - <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset①①">startScrollOffset</a></code>) × <a data-link-type="dfn" href="#effective-time-range" id="ref-for-effective-time-range⑧">effective time range</a></code> </blockquote>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.2" id="animation-timeline"><span class="secno">3.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline①">animation-timeline</a> property</span><a class="self-link" href="#animation-timeline"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline⑧">ScrollTimeline</a></code> may be applied to a CSS Animation <a data-link-type="biblio" href="#biblio-css3-animations">[CSS3-ANIMATIONS]</a> using
the <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline②">animation-timeline</a> property.</p>
   <table class="def propdef" data-link-for-hint="animation-timeline">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-animation-timeline">animation-timeline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-single-animation-timeline" id="ref-for-typedef-single-animation-timeline">&lt;single-animation-timeline></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td>all elements, ::before and ::after pseudo-elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>none
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>As specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no
     <tr>
      <th>Media:
      <td>interactive
   </table>
   <p><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-single-animation-timeline">&lt;single-animation-timeline></dfn> = auto | scroll([element(<a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-id-selector" id="ref-for-typedef-id-selector">&lt;id-selector></a>)[, <a class="production css" data-link-type="type" href="#typedef-scroll-direction" id="ref-for-typedef-scroll-direction">&lt;scroll-direction></a>[, <a class="production css" data-link-type="type" href="#typedef-scroll-offset" id="ref-for-typedef-scroll-offset">&lt;scroll-offset></a>[, <span class="production" id="ref-for-typedef-scroll-offset①">&lt;scroll-offset></span>[, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value" title="Expands to: s | ms">&lt;time></a>[, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode" id="ref-for-typedef-single-animation-fill-mode">&lt;single-animation-fill-mode></a>]]]]]])</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-scroll-direction">&lt;scroll-direction></dfn> = auto | block | inline | horizontal | vertical</p>
   <p><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-scroll-offset">&lt;scroll-offset></dfn> = <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value④">&lt;percentage></a> | auto</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline③">animation-timeline</a> property is similar to properties like <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-duration" id="ref-for-propdef-animation-duration">animation-duration</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function" id="ref-for-propdef-animation-timing-function">animation-timing-function</a> in that it can have one or more values, each one imparting 
additional behavior to a corresponding <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#concept-animation" id="ref-for-concept-animation①">animation</a> on the 
element, with the timelines matched up with animations as described <a href="https://www.w3.org/TR/css3-animations/#animation-name">here</a>.</p>
   <div data-link-for-hint="ScrollTimeline">
    <p>Each value has type <a class="production css" data-link-type="type" href="#typedef-single-animation-timeline" id="ref-for-typedef-single-animation-timeline①">&lt;single-animation-timeline></a>, whose possible values have the
following effects:</p>
    <dl>
     <dt data-md>auto
     <dd data-md>
      <p>The animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#timeline" id="ref-for-timeline②">timeline</a> is a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#documenttimeline" id="ref-for-documenttimeline">DocumentTimeline</a></code>, more specifically the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#default-document-timeline" id="ref-for-default-document-timeline">default document timeline</a>.</p>
     <dt data-md>scroll([element(<a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-id-selector" id="ref-for-typedef-id-selector①">&lt;id-selector></a>)[, <a class="production css" data-link-type="type" href="#typedef-scroll-direction" id="ref-for-typedef-scroll-direction①">&lt;scroll-direction></a>[, <a class="production css" data-link-type="type" href="#typedef-scroll-offset" id="ref-for-typedef-scroll-offset②">&lt;scroll-offset></a>[, <span class="production" id="ref-for-typedef-scroll-offset③">&lt;scroll-offset></span>[, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value①" title="Expands to: s | ms">&lt;time></a>[, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode" id="ref-for-typedef-single-animation-fill-mode①">&lt;single-animation-fill-mode></a>]]]]]])
     <dd data-md>
      <p>The animation’s <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#timeline" id="ref-for-timeline③">timeline</a> is a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline⑨">ScrollTimeline</a></code>.</p>
      <p>The timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource①①">scrollSource</a></code> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container②">scroll container</a> identified
by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-id-selector" id="ref-for-typedef-id-selector②">&lt;id-selector></a>, defaulting to the element’s nearest scrollable ancestor.</p>
      <p>The <a class="production css" data-link-type="type" href="#typedef-scroll-direction" id="ref-for-typedef-scroll-direction②">&lt;scroll-direction></a>, if provided, determines the timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation①②">orientation</a></code>.</p>
      <p>The first <a class="production css" data-link-type="type" href="#typedef-scroll-offset" id="ref-for-typedef-scroll-offset④">&lt;scroll-offset></a>, if provided, determines the timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset①②">startScrollOffset</a></code>.</p>
      <p>The second <a class="production css" data-link-type="type" href="#typedef-scroll-offset" id="ref-for-typedef-scroll-offset⑤">&lt;scroll-offset></a>, if provided, determines the timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①③">endScrollOffset</a></code>.</p>
      <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value②" title="Expands to: s | ms">&lt;time></a> value, if specified, determines the timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange⑤">timeRange</a></code>.</p>
      <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode" id="ref-for-typedef-single-animation-fill-mode②">&lt;single-animation-fill-mode></a> value, if specified, determines the timeline’s <code class="idl"><a data-link-type="idl" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill④">fill</a></code>.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="3.3" id="timeline-examples"><span class="secno">3.3. </span><span class="content">Examples</span><a class="self-link" href="#timeline-examples"></a></h3>
   <div class="example" id="example-c47e1df6">
    <a class="self-link" href="#example-c47e1df6"></a> Draw a reading progress bar along the top of the page as the user scrolls 
<pre class="lang-css highlight"><c- f>#progress </c-><c- p>{</c->
  <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
  <c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>height</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
<c- p>}</c->
</pre>
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
  <c- a>let</c-> progress <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>"progress"</c-><c- p>);</c->
  <c- a>let</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
    progress<c- p>,</c->
    <c- p>[</c->
      <c- p>{</c-> width<c- o>:</c-> <c- u>"0vw"</c-> <c- p>},</c->
      <c- p>{</c-> width<c- o>:</c-> <c- u>"100vw"</c-> <c- p>}</c->
    <c- p>],</c->
    <c- p>{</c->
      duration<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
      easing<c- o>:</c-> <c- u>"linear"</c->
    <c- p>});</c->
  <c- a>let</c-> timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
    trigger<c- o>:</c-> <c- k>new</c-> ScrollTrigger<c- p>({</c->
      scrollSource<c- o>:</c-> document<c- p>.</c->documentElement<c- p>,</c->
      orientation<c- o>:</c-> <c- u>"vertical"</c-><c- p>,</c->
      kind<c- o>:</c-> <c- u>"range"</c->
    <c- p>});</c->
  <c- p>});</c->
  <c- a>let</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> timeline<c- p>);</c->
  animation<c- p>.</c->play<c- p>();</c->
<c- p>}</c->
</pre>
   </div>
   <div class="example" id="example-04835dfd">
    <a class="self-link" href="#example-04835dfd"></a> The same thing with CSS, using <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline④">animation-timeline</a> 
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
  <c- n>@keyframes</c-> progress <c- p>{</c->
    <c- f>from </c-><c- p>{</c->
      <c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>vw</c-><c- p>;</c->
    <c- p>}</c->
    <c- f>to </c-><c- p>{</c->
      <c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>vw</c-><c- p>;</c->
    <c- p>}</c->
  <c- p>}</c->
  #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);
  }
}
</pre>
   </div>
   <h2 class="heading settled" data-level="4" id="avoiding-cycles"><span class="secno">4. </span><span class="content">Avoiding cycles with layout</span><a class="self-link" href="#avoiding-cycles"></a></h2>
   <p>The ability for scrolling to drive the progress of an animation, gives rise to
the possibility of <dfn data-dfn-type="dfn" data-noexport id="layout-cycles">layout cycles<a class="self-link" href="#layout-cycles"></a></dfn>, 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.</p>
   <p>To avoid such cycles, animations with a <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline①⓪">ScrollTimeline</a></code> are sampled once
per frame, after scrolling in response to input events has taken place, but
before <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe" id="ref-for-dom-animationframeprovider-requestanimationframe">requestAnimationFrame()</a></code> 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.</p>
   <p>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.</p>
   <p>User agents that composite frames asynchronously with respect to layout and/or
script may, at their discretion, sample scroll-driven animations once per <em>composited</em> 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.</p>
   <p>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, <code>scroll</code> 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.</p>
   <h2 class="heading settled" data-level="5" id="scroll-triggered-animations"><span class="secno">5. </span><span class="content">Scroll-triggered (but time-driven) animations</span><a class="self-link" href="#scroll-triggered-animations"></a></h2>
   <p>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.</p>
   <p>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.)</p>
   <p>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.</p>
   <p>The design space for triggering animations is still open. We welcome input
on this subject.</p>
   <h2 class="heading settled" id="appendix-a-considerations-for-security-and-privacy"><span class="content">Appendix A. Considerations for Security and Privacy</span><a class="self-link" href="#appendix-a-considerations-for-security-and-privacy"></a></h2>
   <p>This appendix is <em>informative</em>.</p>
   <p>There are no known security or privacy impacts of this feature.</p>
   <p>The W3C TAG is developing a <a href="https://www.w3.org/TR/security-privacy-questionnaire/">Self-Review Questionnaire: Security and Privacy</a> for editors of specifications to informatively answer.</p>
   <p>Per the <a href="https://www.w3.org/TR/security-privacy-questionnaire/#questions">Questions to Consider</a></p>
   <ol>
    <li>
     Does this specification deal with personally-identifiable information? 
     <p>No.</p>
    <li>
     Does this specification deal with high-value data? 
     <p>No.</p>
    <li>
     Does this specification introduce new state for an origin that persists across browsing sessions? 
     <p>No.</p>
    <li>
     Does this specification expose persistent, cross-origin state to the web? 
     <p>No.</p>
    <li>
     Does this specification expose any other data to an origin that it doesn’t currently have access to? 
     <p>No.</p>
    <li>
     Does this specification enable new script execution/loading mechanisms? 
     <p>No.</p>
    <li>
     Does this specification allow an origin access to a user’s location? 
     <p>No.</p>
    <li>
     Does this specification allow an origin access to sensors on a user’s device? 
     <p>No.</p>
    <li>
     Does this specification allow an origin access to aspects of a user’s local computing environment? 
     <p>No.</p>
    <li>
     Does this specification allow an origin access to other devices? 
     <p>No.</p>
    <li>
     Does this specification allow an origin some measure of control over a user agent’s native UI? 
     <p>No.</p>
    <li>
     Does this specification expose temporary identifiers to the web? 
     <p>No.</p>
    <li>
     Does this specification distinguish between behavior in first-party and third-party contexts? 
     <p>No.</p>
    <li>
     How should this specification work in the context of a user agent’s "incognito" mode? 
     <p>No differently. The website should not be able to determine that the user is
in an "incognito" mode using scroll-linked animations.</p>
    <li>
     Does this specification persist data to a user’s local device? 
     <p>No.</p>
    <li>
     Does this specification have a "Security Considerations" and "Privacy Considerations" section? 
     <p>Yes.</p>
    <li>
     Does this specification allow downgrading default security characteristics? 
     <p>No.</p>
   </ol>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>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. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>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. </p>
  <p>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.) </p>
  <p>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. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> 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. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> 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. </p>
  <p>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. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#propdef-animation-timeline">animation-timeline</a><span>, in §3.2</span>
   <li><a href="#dom-scrolltimelineautokeyword-auto">"auto"</a><span>, in §3.1.2</span>
   <li><a href="#dom-scrolldirection-block">"block"</a><span>, in §3.1.1</span>
   <li><a href="#effective-time-range">effective time range</a><span>, in §3.1.3</span>
   <li>
    endScrollOffset
    <ul>
     <li><a href="#dom-scrolltimeline-endscrolloffset">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-endscrolloffset">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li>
    fill
    <ul>
     <li><a href="#dom-scrolltimeline-fill">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-fill">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li><a href="#dom-scrolldirection-horizontal">"horizontal"</a><span>, in §3.1.1</span>
   <li><a href="#dom-scrolldirection-inline">"inline"</a><span>, in §3.1.1</span>
   <li><a href="#layout-cycles">layout cycles</a><span>, in §4</span>
   <li>
    orientation
    <ul>
     <li><a href="#dom-scrolltimeline-orientation">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-orientation">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li><a href="#typedef-scroll-direction">&lt;scroll-direction></a><span>, in §3.2</span>
   <li><a href="#enumdef-scrolldirection">ScrollDirection</a><span>, in §3.1.1</span>
   <li><a href="#typedef-scroll-offset">&lt;scroll-offset></a><span>, in §3.2</span>
   <li>
    scrollSource
    <ul>
     <li><a href="#dom-scrolltimeline-scrollsource">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-scrollsource">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li><a href="#scroll-timeline">scroll timeline</a><span>, in §3.1.2</span>
   <li><a href="#scrolltimeline">ScrollTimeline</a><span>, in §3.1.2</span>
   <li><a href="#enumdef-scrolltimelineautokeyword">ScrollTimelineAutoKeyword</a><span>, in §3.1.2</span>
   <li><a href="#dom-scrolltimeline-scrolltimeline">ScrollTimeline(options)</a><span>, in §3.1.2</span>
   <li><a href="#dictdef-scrolltimelineoptions">ScrollTimelineOptions</a><span>, in §3.1.2</span>
   <li><a href="#typedef-single-animation-timeline">&lt;single-animation-timeline></a><span>, in §3.2</span>
   <li>
    startScrollOffset
    <ul>
     <li><a href="#dom-scrolltimeline-startscrolloffset">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-startscrolloffset">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li>
    timeRange
    <ul>
     <li><a href="#dom-scrolltimeline-timerange">attribute for ScrollTimeline</a><span>, in §3.1.2</span>
     <li><a href="#dom-scrolltimelineoptions-timerange">dict-member for ScrollTimelineOptions</a><span>, in §3.1.2</span>
    </ul>
   <li><a href="#dom-scrolldirection-vertical">"vertical"</a><span>, in §3.1.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-scroll-container">
   <a href="https://drafts.csswg.org/css-overflow-3/#scroll-container">https://drafts.csswg.org/css-overflow-3/#scroll-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-container">3.1.2. The ScrollTimeline interface</a>
    <li><a href="#ref-for-scroll-container①">3.1.4. The current time of a ScrollTimeline</a>
    <li><a href="#ref-for-scroll-container②">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-length-value①">(2)</a> <a href="#ref-for-length-value②">(3)</a> <a href="#ref-for-length-value③">(4)</a>
    <li><a href="#ref-for-length-value④">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-percentage-value①">(2)</a> <a href="#ref-for-percentage-value②">(3)</a> <a href="#ref-for-percentage-value③">(4)</a>
    <li><a href="#ref-for-percentage-value④">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-time-value">
   <a href="https://drafts.csswg.org/css-values-4/#time-value">https://drafts.csswg.org/css-values-4/#time-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-value">3.2. The animation-timeline property</a> <a href="#ref-for-time-value①">(2)</a> <a href="#ref-for-time-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-axis">https://drafts.csswg.org/css-writing-modes-4/#block-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-axis">3.1.1. The ScrollDirection enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">3.1.1. The ScrollDirection enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-single-animation-fill-mode">
   <a href="https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode">https://drafts.csswg.org/css-animations-1/#typedef-single-animation-fill-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-single-animation-fill-mode">3.2. The animation-timeline property</a> <a href="#ref-for-typedef-single-animation-fill-mode①">(2)</a> <a href="#ref-for-typedef-single-animation-fill-mode②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-duration">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-duration">https://drafts.csswg.org/css-animations-1/#propdef-animation-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-duration">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-timing-function">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function">https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-timing-function">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-layout-box">
   <a href="https://drafts.csswg.org/cssom-view/#css-layout-box">https://drafts.csswg.org/cssom-view/#css-layout-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-layout-box">3.1.4. The current time of a ScrollTimeline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-document-scrollingelement">
   <a href="https://drafts.csswg.org/cssom-view-1/#dom-document-scrollingelement">https://drafts.csswg.org/cssom-view-1/#dom-document-scrollingelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-scrollingelement">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-document-scrollingelement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-document①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-element①">(2)</a> <a href="#ref-for-element②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-window">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-window">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animationframeprovider-requestanimationframe">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationframeprovider-requestanimationframe">4. Avoiding cycles with layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-id-selector">
   <a href="https://drafts.csswg.org/selectors-4/#typedef-id-selector">https://drafts.csswg.org/selectors-4/#typedef-id-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-id-selector">3.2. The animation-timeline property</a> <a href="#ref-for-typedef-id-selector①">(2)</a> <a href="#ref-for-typedef-id-selector②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animationtimeline">
   <a href="https://drafts.csswg.org/web-animations-1/#animationtimeline">https://drafts.csswg.org/web-animations-1/#animationtimeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationtimeline">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-animationtimeline①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-documenttimeline">
   <a href="https://drafts.csswg.org/web-animations-1/#documenttimeline">https://drafts.csswg.org/web-animations-1/#documenttimeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-documenttimeline">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-enumdef-fillmode">
   <a href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode">https://drafts.csswg.org/web-animations-1/#enumdef-fillmode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-fillmode">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-enumdef-fillmode①">(2)</a> <a href="#ref-for-enumdef-fillmode②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-animation">
   <a href="https://w3c.github.io/web-animations/#concept-animation">https://w3c.github.io/web-animations/#concept-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-animation">1.1. Relationship to other specifications</a>
    <li><a href="#ref-for-concept-animation①">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-time">
   <a href="https://w3c.github.io/web-animations/#current-time">https://w3c.github.io/web-animations/#current-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-time">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-current-time①">(2)</a> <a href="#ref-for-current-time②">(3)</a> <a href="#ref-for-current-time③">(4)</a>
    <li><a href="#ref-for-current-time④">3.1.4. The current time of a ScrollTimeline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-default-document-timeline">
   <a href="https://w3c.github.io/web-animations/#default-document-timeline">https://w3c.github.io/web-animations/#default-document-timeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-document-timeline">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-duration">
   <a href="https://w3c.github.io/web-animations/#duration">https://w3c.github.io/web-animations/#duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-duration">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-start-delay">
   <a href="https://w3c.github.io/web-animations/#start-delay">https://w3c.github.io/web-animations/#start-delay</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start-delay">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-target-effect-end">
   <a href="https://w3c.github.io/web-animations/#target-effect-end">https://w3c.github.io/web-animations/#target-effect-end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-effect-end">3.1.3. The effective time range of a ScrollTimeline</a> <a href="#ref-for-target-effect-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-timeline">
   <a href="https://w3c.github.io/web-animations/#timeline">https://w3c.github.io/web-animations/#timeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline">1.1. Relationship to other specifications</a> <a href="#ref-for-timeline①">(2)</a>
    <li><a href="#ref-for-timeline②">3.2. The animation-timeline property</a> <a href="#ref-for-timeline③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a> <a href="#ref-for-idl-DOMString④">(5)</a> <a href="#ref-for-idl-DOMString⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-idl-double①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-scroll-container" style="color:initial">scroll container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-time-value" style="color:initial">&lt;time></span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-axis" style="color:initial">block axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis" style="color:initial">inline axis</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-ANIMATIONS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-single-animation-fill-mode" style="color:initial">&lt;single-animation-fill-mode></span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-duration" style="color:initial">animation-duration</span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-timing-function" style="color:initial">animation-timing-function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-layout-box" style="color:initial">css layout box</span>
     <li><span class="dfn-paneled" id="term-for-dom-document-scrollingelement" style="color:initial">scrollingElement</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-window" style="color:initial">document associated with a window</span>
     <li><span class="dfn-paneled" id="term-for-dom-animationframeprovider-requestanimationframe" style="color:initial">requestAnimationFrame(callback)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-id-selector" style="color:initial">&lt;id-selector></span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-animationtimeline" style="color:initial">AnimationTimeline</span>
     <li><span class="dfn-paneled" id="term-for-documenttimeline" style="color:initial">DocumentTimeline</span>
     <li><span class="dfn-paneled" id="term-for-enumdef-fillmode" style="color:initial">FillMode</span>
     <li><span class="dfn-paneled" id="term-for-concept-animation" style="color:initial">animation</span>
     <li><span class="dfn-paneled" id="term-for-current-time" style="color:initial">current time</span>
     <li><span class="dfn-paneled" id="term-for-default-document-timeline" style="color:initial">default document timeline</span>
     <li><span class="dfn-paneled" id="term-for-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-start-delay" style="color:initial">start delay</span>
     <li><span class="dfn-paneled" id="term-for-target-effect-end" style="color:initial">target effect end</span>
     <li><span class="dfn-paneled" id="term-for-timeline" style="color:initial">timeline</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 6 June 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css3-animations">[CSS3-ANIMATIONS]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline⑤">animation-timeline</a>
      <td>&lt;single-animation-timeline>#
      <td>auto
      <td>all elements, ::before and ::after pseudo-elements
      <td>none
      <td>N/A
      <td>no
      <td>per grammar
      <td>As specified
      <td>interactive
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>enum</c-> <a href="#enumdef-scrolldirection"><code><c- g>ScrollDirection</c-></code></a> {
  <a href="#dom-scrolldirection-block"><code><c- s>"block"</c-></code></a>,
  <a href="#dom-scrolldirection-inline"><code><c- s>"inline"</c-></code></a>,
  <a href="#dom-scrolldirection-horizontal"><code><c- s>"horizontal"</c-></code></a>,
  <a href="#dom-scrolldirection-vertical"><code><c- s>"vertical"</c-></code></a>
};

<c- b>enum</c-> <a href="#enumdef-scrolltimelineautokeyword"><code><c- g>ScrollTimelineAutoKeyword</c-></code></a> { <a href="#dom-scrolltimelineautokeyword-auto"><code><c- s>"auto"</c-></code></a> };

<c- b>dictionary</c-> <a href="#dictdef-scrolltimelineoptions"><code><c- g>ScrollTimelineOptions</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③"><c- n>Element</c-></a>? <a data-default="null" data-type="Element? " href="#dom-scrolltimelineoptions-scrollsource"><code><c- g>scrollSource</c-></code></a> = <c- b>null</c->;
  <a class="n" data-link-type="idl-name" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection②①"><c- n>ScrollDirection</c-></a> <a data-default="&quot;block&quot;" data-type="ScrollDirection " href="#dom-scrolltimelineoptions-orientation"><code><c- g>orientation</c-></code></a> = "block";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <a data-default="&quot;auto&quot;" data-type="DOMString " href="#dom-scrolltimelineoptions-startscrolloffset"><code><c- g>startScrollOffset</c-></code></a> = "auto";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a data-default="&quot;auto&quot;" data-type="DOMString " href="#dom-scrolltimelineoptions-endscrolloffset"><code><c- g>endScrollOffset</c-></code></a> = "auto";
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolltimelineautokeyword" id="ref-for-enumdef-scrolltimelineautokeyword②"><c- n>ScrollTimelineAutoKeyword</c-></a>) <a data-default="&quot;auto&quot;" data-type="(double or ScrollTimelineAutoKeyword) " href="#dom-scrolltimelineoptions-timerange"><code><c- g>timeRange</c-></code></a> = "auto";
  <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode" id="ref-for-enumdef-fillmode③"><c- n>FillMode</c-></a> <a data-default="&quot;none&quot;" data-type="FillMode " href="#dom-scrolltimelineoptions-fill"><code><c- g>fill</c-></code></a> = "none";
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 <a class="idl-code" data-link-type="constructor" href="#dom-scrolltimeline-scrolltimeline" id="ref-for-dom-scrolltimeline-scrolltimeline①"><c- g>Constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-scrolltimelineoptions" id="ref-for-dictdef-scrolltimelineoptions①"><c- n>ScrollTimelineOptions</c-></a> <a href="#dom-scrolltimeline-scrolltimeline-options-options"><code><c- g>options</c-></code></a> = {})]
<c- b>interface</c-> <a href="#scrolltimeline"><code><c- g>ScrollTimeline</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline②"><c- n>AnimationTimeline</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-scrolltimeline-scrollsource" id="ref-for-dom-scrolltimeline-scrollsource①②"><c- g>scrollSource</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolldirection" id="ref-for-enumdef-scrolldirection③①"><c- n>ScrollDirection</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="ScrollDirection" href="#dom-scrolltimeline-orientation" id="ref-for-dom-scrolltimeline-orientation①③"><c- g>orientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-scrolltimeline-startscrolloffset" id="ref-for-dom-scrolltimeline-startscrolloffset①③"><c- g>startScrollOffset</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-scrolltimeline-endscrolloffset" id="ref-for-dom-scrolltimeline-endscrolloffset①④"><c- g>endScrollOffset</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#enumdef-scrolltimelineautokeyword" id="ref-for-enumdef-scrolltimelineautokeyword①①"><c- n>ScrollTimelineAutoKeyword</c-></a>) <a class="idl-code" data-link-type="attribute" data-readonly data-type="(double or ScrollTimelineAutoKeyword)" href="#dom-scrolltimeline-timerange" id="ref-for-dom-scrolltimeline-timerange⑥"><c- g>timeRange</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#enumdef-fillmode" id="ref-for-enumdef-fillmode①①"><c- n>FillMode</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FillMode" href="#dom-scrolltimeline-fill" id="ref-for-dom-scrolltimeline-fill⑤"><c- g>fill</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="enumdef-scrolldirection">
   <b><a href="#enumdef-scrolldirection">#enumdef-scrolldirection</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-scrolldirection">3.1.1. The ScrollDirection enumeration</a> <a href="#ref-for-enumdef-scrolldirection①">(2)</a>
    <li><a href="#ref-for-enumdef-scrolldirection②">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-enumdef-scrolldirection③">(2)</a> <a href="#ref-for-enumdef-scrolldirection④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-scrolltimelineautokeyword">
   <b><a href="#enumdef-scrolltimelineautokeyword">#enumdef-scrolltimelineautokeyword</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-scrolltimelineautokeyword">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-enumdef-scrolltimelineautokeyword①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-scrolltimelineoptions">
   <b><a href="#dictdef-scrolltimelineoptions">#dictdef-scrolltimelineoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-scrolltimelineoptions">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scrolltimeline">
   <b><a href="#scrolltimeline">#scrolltimeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrolltimeline">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-scrolltimeline①">(2)</a> <a href="#ref-for-scrolltimeline②">(3)</a>
    <li><a href="#ref-for-scrolltimeline③">3.1.3. The effective time range of a ScrollTimeline</a> <a href="#ref-for-scrolltimeline④">(2)</a> <a href="#ref-for-scrolltimeline⑤">(3)</a>
    <li><a href="#ref-for-scrolltimeline⑥">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-scrolltimeline⑦">(2)</a>
    <li><a href="#ref-for-scrolltimeline⑧">3.2. The animation-timeline property</a> <a href="#ref-for-scrolltimeline⑨">(2)</a>
    <li><a href="#ref-for-scrolltimeline①⓪">4. Avoiding cycles with layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scroll-timeline">
   <b><a href="#scroll-timeline">#scroll-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-timeline">1.1. Relationship to other specifications</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-scrolltimeline">
   <b><a href="#dom-scrolltimeline-scrolltimeline">#dom-scrolltimeline-scrolltimeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-scrolltimeline">3.1.2. The ScrollTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-scrollsource">
   <b><a href="#dom-scrolltimeline-scrollsource">#dom-scrolltimeline-scrollsource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-scrollsource">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-scrollsource①">(2)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource②">(3)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource③">(4)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource④">(5)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource⑤">(6)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource⑥">(7)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource⑦">(8)</a>
    <li><a href="#ref-for-dom-scrolltimeline-scrollsource⑧">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-scrollsource⑨">(2)</a> <a href="#ref-for-dom-scrolltimeline-scrollsource①⓪">(3)</a>
    <li><a href="#ref-for-dom-scrolltimeline-scrollsource①①">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-orientation">
   <b><a href="#dom-scrolltimeline-orientation">#dom-scrolltimeline-orientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-orientation">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-orientation①">(2)</a> <a href="#ref-for-dom-scrolltimeline-orientation②">(3)</a> <a href="#ref-for-dom-scrolltimeline-orientation③">(4)</a> <a href="#ref-for-dom-scrolltimeline-orientation④">(5)</a> <a href="#ref-for-dom-scrolltimeline-orientation⑤">(6)</a> <a href="#ref-for-dom-scrolltimeline-orientation⑥">(7)</a> <a href="#ref-for-dom-scrolltimeline-orientation⑦">(8)</a> <a href="#ref-for-dom-scrolltimeline-orientation⑧">(9)</a> <a href="#ref-for-dom-scrolltimeline-orientation⑨">(10)</a>
    <li><a href="#ref-for-dom-scrolltimeline-orientation①⓪">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-orientation①①">(2)</a>
    <li><a href="#ref-for-dom-scrolltimeline-orientation①②">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-startscrolloffset">
   <b><a href="#dom-scrolltimeline-startscrolloffset">#dom-scrolltimeline-startscrolloffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-startscrolloffset">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset①">(2)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset②">(3)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset③">(4)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset④">(5)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset⑤">(6)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset⑥">(7)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset⑦">(8)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset⑧">(9)</a>
    <li><a href="#ref-for-dom-scrolltimeline-startscrolloffset⑨">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset①⓪">(2)</a> <a href="#ref-for-dom-scrolltimeline-startscrolloffset①①">(3)</a>
    <li><a href="#ref-for-dom-scrolltimeline-startscrolloffset①②">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-endscrolloffset">
   <b><a href="#dom-scrolltimeline-endscrolloffset">#dom-scrolltimeline-endscrolloffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-endscrolloffset">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset①">(2)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset②">(3)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset③">(4)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset④">(5)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset⑤">(6)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset⑥">(7)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset⑦">(8)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset⑧">(9)</a>
    <li><a href="#ref-for-dom-scrolltimeline-endscrolloffset⑨">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset①⓪">(2)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset①①">(3)</a> <a href="#ref-for-dom-scrolltimeline-endscrolloffset①②">(4)</a>
    <li><a href="#ref-for-dom-scrolltimeline-endscrolloffset①③">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-timerange">
   <b><a href="#dom-scrolltimeline-timerange">#dom-scrolltimeline-timerange</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-timerange">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-timerange①">(2)</a> <a href="#ref-for-dom-scrolltimeline-timerange②">(3)</a>
    <li><a href="#ref-for-dom-scrolltimeline-timerange③">3.1.3. The effective time range of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-timerange④">(2)</a>
    <li><a href="#ref-for-dom-scrolltimeline-timerange⑤">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-scrolltimeline-fill">
   <b><a href="#dom-scrolltimeline-fill">#dom-scrolltimeline-fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-scrolltimeline-fill">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-dom-scrolltimeline-fill①">(2)</a>
    <li><a href="#ref-for-dom-scrolltimeline-fill②">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-dom-scrolltimeline-fill③">(2)</a>
    <li><a href="#ref-for-dom-scrolltimeline-fill④">3.2. The animation-timeline property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effective-time-range">
   <b><a href="#effective-time-range">#effective-time-range</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effective-time-range">3.1.2. The ScrollTimeline interface</a> <a href="#ref-for-effective-time-range①">(2)</a> <a href="#ref-for-effective-time-range②">(3)</a> <a href="#ref-for-effective-time-range③">(4)</a>
    <li><a href="#ref-for-effective-time-range④">3.1.3. The effective time range of a ScrollTimeline</a> <a href="#ref-for-effective-time-range⑤">(2)</a> <a href="#ref-for-effective-time-range⑥">(3)</a>
    <li><a href="#ref-for-effective-time-range⑦">3.1.4. The current time of a ScrollTimeline</a> <a href="#ref-for-effective-time-range⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-animation-timeline">
   <b><a href="#propdef-animation-timeline">#propdef-animation-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-timeline">2.3.2. The content progress bar</a>
    <li><a href="#ref-for-propdef-animation-timeline①">3.2. The animation-timeline property</a> <a href="#ref-for-propdef-animation-timeline②">(2)</a> <a href="#ref-for-propdef-animation-timeline③">(3)</a>
    <li><a href="#ref-for-propdef-animation-timeline④">3.3. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-single-animation-timeline">
   <b><a href="#typedef-single-animation-timeline">#typedef-single-animation-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-single-animation-timeline">3.2. The animation-timeline property</a> <a href="#ref-for-typedef-single-animation-timeline①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-scroll-direction">
   <b><a href="#typedef-scroll-direction">#typedef-scroll-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-scroll-direction">3.2. The animation-timeline property</a> <a href="#ref-for-typedef-scroll-direction①">(2)</a> <a href="#ref-for-typedef-scroll-direction②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-scroll-offset">
   <b><a href="#typedef-scroll-offset">#typedef-scroll-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-scroll-offset">3.2. The animation-timeline property</a> <a href="#ref-for-typedef-scroll-offset①">(2)</a> <a href="#ref-for-typedef-scroll-offset②">(3)</a> <a href="#ref-for-typedef-scroll-offset③">(4)</a> <a href="#ref-for-typedef-scroll-offset④">(5)</a> <a href="#ref-for-typedef-scroll-offset⑤">(6)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>