Hide photo viewer use case while we re-do it

Author: birtles

Overview.bs

@@ -310,7 +310,11 @@ If we use this API for this case, the example code will be as follow:
 
 ## Combination scroll and time-base animations ## {#combination-scroll-and-time-base-animations-usecase}
 
-### The photo viewer ### {#movie-show-case-usecase}
+### Photo viewer ### {#movie-show-case-usecase}
+
+Advisement: We are currently reworking this use case
+
+<!--
 Maybe the developer will want to use the scroll based timeline and the time-based timeline.
 
 Here's an example content which showing the photos.
@@ -345,6 +349,7 @@ This content can't build the CSS only.
     }
   });
 </pre>
+-->
 
 </div>
 

index.html

@@ -317,7 +317,7 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
       <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">The photo viewer</span></a>
+        <li><a href="#movie-show-case-usecase"><span class="secno">2.4.1</span> <span class="content">Photo viewer</span></a>
        </ol>
      </ol>
     <li>
@@ -584,32 +584,8 @@ <h4 class="heading settled" data-level="2.3.2" id="content-progress-bar-usecase"
 <span class="p">)</span><span class="p">;</span>
 </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">The photo viewer</span><a class="self-link" href="#movie-show-case-usecase"></a></h4>
-    Maybe the developer will want to use the scroll based timeline and the time-based timeline. 
-   <p>Here’s an example content which showing the photos.
-If scroll position is out of specified range, the animation of the slideshow will start. The progress of this slideshow is related to scroll volume. And if scroll position is within the specified range, the animation of the slideshow will continue automatically.</p>
-   <figure>
-     <img alt="Use case 4: Scrollable slide show." src="img/usecase4.svg" width="600"> 
-    <figcaption> Use case 4: Scrollable slide show.<br> The left figure is before scroll, the slide show will start as scroll-linked animation.<br> The right figure is after scroll, the slide show will start as related to the time animation. </figcaption>
-   </figure>
-   <p>This content can’t build the CSS only.</p>
-<pre class="lang-javascript highlight"><span class="kd">var</span> animation <span class="o">=</span> slideTarget<span class="p">.</span>getAnimation<span class="p">(</span><span class="p">)</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="p">;</span>
-<span class="kd">var</span> scrollTimeline <span class="o">=</span> <span class="k">new</span> ScrollTimeline<span class="p">(</span>
-  <span class="p">{</span> trigger<span class="o">:</span> <span class="k">new</span> ScrollTrigger<span class="p">(</span><span class="p">{</span> scrollSource<span class="o">:</span> scrollableElement<span class="p">,</span>
-                                 orientation<span class="o">:</span> <span class="s2">"vertical"</span><span class="p">,</span>
-                                 scrollOffset<span class="o">:</span> <span class="s1">'0px'</span><span class="p">,</span>
-                                 endScrollOffset<span class="o">:</span> <span class="s1">'200px'</span><span class="p">}</span><span class="p">)</span><span class="p">}</span><span class="p">)</span><span class="p">;</span>
-animation<span class="p">.</span>timeline <span class="o">=</span> scrollTimeline<span class="p">;</span>
-
-<span class="c1">// We use scroll event in order to change the timeline.
-</span>scrollableElement<span class="p">.</span>addEventListener<span class="p">(</span><span class="s2">"scroll"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span>evt<span class="p">)</span> <span class="p">{</span>
-  <span class="k">if</span> <span class="p">(</span><span class="p">(</span>scrollableElement<span class="p">.</span>scrollTop <span class="o">></span> <span class="mi">200</span><span class="p">)</span> <span class="o">&amp;&amp;</span> animation<span class="p">.</span>timeline <span class="o">!=</span> document<span class="p">.</span>timeline<span class="p">)</span> <span class="p">{</span>
-    animation<span class="p">.</span>timeline <span class="o">=</span> document<span class="p">.</span>timeline<span class="p">;</span>
-  <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="p">(</span>scrollableElement<span class="p">.</span>scrollTop <span class="o">&lt;</span> <span class="mi">200</span><span class="p">)</span> <span class="o">&amp;&amp;</span> animation<span class="p">.</span>timeline <span class="o">==</span> document<span class="p">.</span>timeline<span class="p">)</span> <span class="p">{</span>
-    animation<span class="p">.</span>timeline <span class="o">=</span> scrollTimeline<span class="p">;</span>
-  <span class="p">}</span>
-<span class="p">}</span><span class="p">)</span><span class="p">;</span>
-</pre>
+   <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="triggering-animations"><span class="secno">3. </span><span class="content">Triggering animations</span><a class="self-link" href="#triggering-animations"></a></h2>
    <h3 class="heading settled" data-level="3.1" id="animationtimelinetrigger-interface"><span class="secno">3.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#animationtimelinetrigger" id="ref-for-animationtimelinetrigger-1">AnimationTimelineTrigger</a></code> interface</span><a class="self-link" href="#animationtimelinetrigger-interface"></a></h3>
 <pre class="idl highlight def"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="animationtimelinetrigger">AnimationTimelineTrigger</dfn> {