Add an example demonstrating the use of @trigger for things other than animations

Author: theres-waldo

Overview.bs

@@ -527,10 +527,25 @@ media queries somehow?
   </pre>
 </div>
 
-Issue: We should add an example of something that toggles 'visibility' or
-even 'display' to demonstrates how ''@trigger'' can be used more widely than
-just animations. (Particularly since 'display' can't be animated normally.)
-
+<div class="example">
+  Using ''@trigger'' for things other than animations
+  <pre class="lang-css">
+    /* 
+      Elements with the class 'elusive' are only displayed while the scroll offset
+      is in the range [200, 300].
+      Note that 'display' can't be animated normally.
+      Assume the HTML element has id 'root' 
+    */
+    .elusive {
+      display: none;
+    }
+    @trigger scroll(element(#root), vertical, 200px, 300px) {
+      .elusive {
+        display: block;
+      }
+    }
+  </pre>
+</div>
 
 # Controlling animation playback # {#controlling-animation-playback}
 

index.html

@@ -794,9 +794,24 @@ <h3 class="heading settled" data-level="3.7" id="trigger-examples"><span class="
 <span class="p">}</span>
 </pre>
    </div>
-   <p class="issue" id="issue-102d681d"><a class="self-link" href="#issue-102d681d"></a> We should add an example of something that toggles <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css21/visufx.html#propdef-visibility">visibility</a> or
-even <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display">display</a> to demonstrates how <a class="css" data-link-type="maybe" href="#at-ruledef-trigger" id="ref-for-at-ruledef-trigger-5">@trigger</a> can be used more widely than
-just animations. (Particularly since <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display">display</a> can’t be animated normally.)</p>
+   <div class="example" id="example-c553e53f">
+    <a class="self-link" href="#example-c553e53f"></a> Using <a class="css" data-link-type="maybe" href="#at-ruledef-trigger" id="ref-for-at-ruledef-trigger-5">@trigger</a> for things other than animations 
+<pre class="lang-css highlight"><span class="c">/* </span>
+<span class="c">  Elements with the class 'elusive' are only displayed while the scroll offset</span>
+<span class="c">  is in the range [200, 300].</span>
+<span class="c">  Note that 'display' can’t be animated normally.</span>
+<span class="c">  Assume the HTML element has id 'root' </span>
+<span class="c">*/</span>
+<span class="nt">.elusive </span><span class="p">{</span>
+  <span class="k">display</span><span class="p">:</span> none<span class="p">;</span>
+<span class="p">}</span>
+<span class="n">@trigger</span> <span class="nf">scroll</span><span class="p">(</span><span class="nf">element</span><span class="p">(</span>#root<span class="p">),</span> vertical<span class="p">,</span> <span class="m">200</span><span class="l">px</span><span class="p">,</span> <span class="m">300</span><span class="l">px</span><span class="p">)</span> <span class="p">{</span>
+  <span class="nt">.elusive </span><span class="p">{</span>
+    <span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
+  <span class="p">}</span>
+<span class="p">}</span>
+</pre>
+   </div>
    <h2 class="heading settled" data-level="4" id="controlling-animation-playback"><span class="secno">4. </span><span class="content">Controlling animation playback</span><a class="self-link" href="#controlling-animation-playback"></a></h2>
    <h3 class="heading settled" data-level="4.1" id="scrolltimeline-interface"><span class="secno">4.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#scrolltimeline" id="ref-for-scrolltimeline-1">ScrollTimeline</a></code> interface</span><a class="self-link" href="#scrolltimeline-interface"></a></h3>
 <pre class="idl highlight def"><span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-scrolltimelineautokeyword">ScrollTimelineAutoKeyword</dfn> { <dfn class="s idl-code" data-dfn-for="ScrollTimelineAutoKeyword" data-dfn-type="enum-value" data-export="" data-lt="&quot;auto&quot;|auto" id="dom-scrolltimelineautokeyword-auto">"auto"<a class="self-link" href="#dom-scrolltimelineautokeyword-auto"></a></dfn> };
@@ -1268,11 +1283,6 @@ <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span cla
      <li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">animation-name</a>
      <li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-timing-function">animation-timing-function</a>
     </ul>
-   <li>
-    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
-    <ul>
-     <li><a href="https://drafts.csswg.org/css-display-3/#propdef-display">display</a>
-    </ul>
    <li>
     <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
     <ul>
@@ -1302,11 +1312,6 @@ <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span cla
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block-axis">block axis</a>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#inline-axis">inline axis</a>
     </ul>
-   <li>
-    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
-    <ul>
-     <li><a href="https://drafts.csswg.org/css21/visufx.html#propdef-visibility">visibility</a>
-    </ul>
    <li>
     <a data-link-type="biblio">[WHATWG-DOM]</a> defines the following terms:
     <ul>
@@ -1353,8 +1358,6 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
   <dl>
    <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1]
    <dd>CSS Animations Module Level 1 URL: <a href="https://drafts.csswg.org/css-animations-1/">https://drafts.csswg.org/css-animations-1/</a>
-   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
-   <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://dev.w3.org/csswg/css-display/">CSS Display Module Level 3</a>. 15 October 2015. WD. URL: <a href="http://dev.w3.org/csswg/css-display/">http://dev.w3.org/csswg/css-display/</a>
    <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
    <dd>David Baron; Florian Rivoal. <a href="http://drafts.csswg.org/css-overflow/">CSS Overflow Module Level 3</a>. 31 May 2016. WD. URL: <a href="http://drafts.csswg.org/css-overflow/">http://drafts.csswg.org/css-overflow/</a>
    <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
@@ -1363,8 +1366,6 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
    <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://dev.w3.org/csswg/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://dev.w3.org/csswg/css-values/">http://dev.w3.org/csswg/css-values/</a>
    <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
    <dd>Elika Etemad; Koji Ishii. <a href="http://dev.w3.org/csswg/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 15 December 2015. CR. URL: <a href="http://dev.w3.org/csswg/css-writing-modes-3/">http://dev.w3.org/csswg/css-writing-modes-3/</a>
-   <dt id="biblio-css2">[CSS2]
-   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2">https://www.w3.org/TR/CSS2</a>
    <dt id="biblio-html">[HTML]
    <dd>Ian Hickson. <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]
@@ -1506,9 +1507,6 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
    <div class="issue"> Do we need <a class="property" data-link-type="propdesc" href="#propdef-animation-trigger">animation-trigger</a> at all, or is <a class="css" data-link-type="maybe" href="#at-ruledef-trigger">@trigger</a> sufficient?<a href="#issue-7c802841"> ↵ </a></div>
    <div class="issue"> Should this be called ‘@scroll’ perhaps? Or integrated with
 media queries somehow?<a href="#issue-f02ea5ba"> ↵ </a></div>
-   <div class="issue"> We should add an example of something that toggles <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css21/visufx.html#propdef-visibility">visibility</a> or
-even <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display">display</a> to demonstrates how <a class="css" data-link-type="maybe" href="#at-ruledef-trigger">@trigger</a> can be used more widely than
-just animations. (Particularly since <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display">display</a> can’t be animated normally.)<a href="#issue-102d681d"> ↵ </a></div>
    <div class="issue"> A <code class="idl"><a data-link-type="idl" href="#scrolltrigger">ScrollTrigger</a></code> is only active when the scroll offset is within the range,
        and a timeline is inactive when its trigger is inactive. How can we reconcile
        this will fill modes, which require an active timeline outside the range in