Examples for 'controlling animation playback'

Author: theres-waldo

Overview.bs

@@ -392,7 +392,7 @@ following effects:
 
     The second <<scroll-offset>>, if provided, determines the trigger's {{ScrollTrigger/endScrollOffset}}.
 
-## @trigger rules ## {#trigger-rules}
+## ''@trigger'' rules ## {#trigger-rules}
 
 The <dfn>@trigger</dfn> at-rule allows conditioning the application of CSS rules
 on the scroll progress of a [=scroll container=]. It is defined as follows:
@@ -419,8 +419,8 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
 ## Examples ## {#trigger-examples}
 
 <div class="example">
+  Spin an element while the page's vertical scroll offset is within a range
   <pre class="lang-javascript">
-    // Spin an element while the page's vertical scroll offset is within a range
     let spinner = document.getElementById("spinner");
     let effect = new KeyframeEffect(
       spinner,
@@ -448,8 +448,8 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
 </div>
 
 <div class="example">
+  The same thing with CSS, using 'animation-trigger'
   <pre class="lang-css">
-    /* The same thing with CSS, using animation-trigger */
     @keyframes spin {
       from {
         transform: rotate(0);
@@ -473,8 +473,8 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
 </div>
 
 <div class="example">
+  The same thing with CSS, using ''@trigger''
   <pre class="lang-css">
-    /* The same thing with CSS, using @trigger */
     @keyframes spin {
       from {
         transform: rotate(0);
@@ -673,7 +673,101 @@ following effects:
 
 ## Examples ## {#timeline-examples}
 
-TBD
+<div class="example">
+  Draw a reading progress bar along the top of the page as the user scrolls
+  <pre class="lang-css">
+    #progress {
+      position: fixed;
+      top: 0;
+      width: 0;
+      height: 2px;
+      background-color: red;
+    }
+  </pre>
+  <pre class="lang-javascript">
+    let progress = document.getElementById("progress");
+    let effect = new KeyframeEffect(
+      progress,
+      [
+        { width: "0vw" },
+        { width: "100vw" }
+      ],
+      {
+        duration: 1000,
+        easing: "linear"
+      });
+    let timeline = new ScrollTimeline({
+      trigger: new ScrollTrigger({
+        scrollSource: document.documentElement,
+        orientation: "vertical",
+        kind: "range"
+      })      
+    });
+    let animation = new Animation(effect, timeline);
+    animation.play();
+  </pre>
+</div>
+
+<div class="example">
+  The same thing with CSS, using 'animation-trigger'
+  <pre class="lang-css">
+    @keyframes progress {
+      from {
+        width: 0vw;
+      }
+      to {
+        width: 100vw;
+      }
+    }
+    html {
+      scroll-container-name: root;
+    }
+    #progress {
+      position: fixed;
+      top: 0;
+      width: 0;
+      height: 2px;
+      background-color: red;
+      animation-name: progress;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-trigger: scroll(root, vertical);
+      animation-timeline: scroll();
+    }
+  </pre>
+</div>
+
+<div class="example">
+  The same thing with CSS, using ''@trigger''
+  <pre class="lang-css">
+    @keyframes progress {
+      from {
+        width: 0vw;
+      }
+      to {
+        width: 100vw;
+      }
+    }
+    html {
+      scroll-container-name: root;
+    }
+    #progress {
+      position: fixed;
+      top: 0;
+      width: 0;
+      height: 2px;
+      background-color: red;
+    }
+    @trigger scroll(root, vertical) {
+      #progress {
+        animation-name: progress;
+        animation-duration: 1s;
+        animation-timing-function: linear;
+        animation-timeline: scroll();
+      }
+    }
+  </pre>
+</div>
 
 # Avoiding cycles with layout # {#avoiding-cycles}