Examples for 'triggering animations'

Author: theres-waldo

Overview.bs

@@ -338,7 +338,8 @@ Canonical order: per grammar
 </pre>
 
 The 'scroll-container-name' property defines a custom identifier for a [=scroll container=],
-which allows the scroll container to be referred to by the 'animation-trigger' property.
+which allows the scroll container to be referred to by the 'animation-trigger' property
+(and possibly other properties in the future).
 
 Each 'scroll-container-name' value in a document should be unique; if multiple scroll 
 containers in a document have the same 'scroll-container-name', references to that name
@@ -417,6 +418,87 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
 
 ## Examples ## {#trigger-examples}
 
+<div class="example">
+  <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,
+      [
+        { transform: 'rotate(0)' },
+        { transform: 'rotate(1turn)' }
+      ],
+      { 
+        duration: 300,
+        fill: 'both',
+        easing: 'linear'
+      });
+    let timeline = new DocumentTimeline({
+      trigger: new ScrollTrigger({
+        scrollSource: document.documentElement,
+        orientation: "vertical",
+        kind: "range",
+        scrollOffset: "500px",
+        endScrollOffset: "1000px"
+      });
+    });  
+    let animation = new Animation(effect, timeline);
+    animation.play();  
+  </pre>
+</div>
+
+<div class="example">
+  <pre class="lang-css">
+    /* The same thing with CSS, using animation-trigger */
+    @keyframes spin {
+      from {
+        transform: rotate(0);
+      }
+      to {
+        transform: rotate(1turn);
+      }
+    }
+    html {
+      scroll-container-name: root;
+    }
+    #spinner {
+      animation-name: spin;
+      animation-duration: 300ms;
+      animation-fill-mode: both;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      animation-trigger: scroll(root, vertical, 500px, 1000px);
+    }
+  </pre>
+</div>
+
+<div class="example">
+  <pre class="lang-css">
+    /* The same thing with CSS, using @trigger */
+    @keyframes spin {
+      from {
+        transform: rotate(0);
+      }
+      to {
+        transform: rotate(1turn);
+      }
+    }
+    html {
+      scroll-container-name: root;
+    }
+    @trigger scroll(root, vertical, 500px, 1000px) {
+      #spinner {
+        animation-name: spin;
+        animation-duration: 300ms;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+    }
+  </pre>
+</div>
+
+
 # Controlling animation playback # {#controlling-animation-playback}
 
 ## The {{ScrollTimeline}} interface ## {#scrolltimeline-interface}