Use prefers-reduced-motion: no-preference in examples (#45)

Author: stephenmcgruer

Overview.bs

@@ -157,53 +157,57 @@ alt="Use case: The picture-story show.">
 Using the CSS markup:
 
 <pre class='lang-css'>
-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 }
+@media (prefers-reduced-motion: no-preference) {
+  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>
 
 Using the programming interface, we might write this as:
 
 <pre class='lang-javascript'>
-var circleTimeline = new ScrollTimeline({
-  scrollSource: scrollableElement,
-  scrollOffset: '200px',
-  endScrollOffset: '300px'
-});
-
-var left = leftCircle.animate({ transform: 'translate(300px)' }, 1000);
-left.timeline = circleTimeline;
-
-var right = leftCircle.animate({ transform: 'translate(350px)' }, 1000);
-right.timeline = circleTimeline;
-
-var union = unionCircle.animate({ opacity: 1 }, 1000);
-union.timeline = new ScrollTimeline({
-  scrollSource: scrollableElement,
-  startScrollOffset: '250px',
-  endScrollOffset: '300px'
-});
+if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
+  var circleTimeline = new ScrollTimeline({
+    scrollSource: scrollableElement,
+    scrollOffset: '200px',
+    endScrollOffset: '300px'
+  });
+
+  var left = leftCircle.animate({ transform: 'translate(300px)' }, 1000);
+  left.timeline = circleTimeline;
+
+  var right = leftCircle.animate({ transform: 'translate(350px)' }, 1000);
+  right.timeline = circleTimeline;
+
+  var union = unionCircle.animate({ opacity: 1 }, 1000);
+  union.timeline = new ScrollTimeline({
+    scrollSource: scrollableElement,
+    startScrollOffset: '250px',
+    endScrollOffset: '300px'
+  });
+}
 </pre>
 
 ### The content progress bar ### {#content-progress-bar-usecase}
@@ -231,25 +235,29 @@ Using the 'animation-timeline' property, this example could be written
 as follows:
 
 <pre class='lang-css'>
-@keyframes progress {
-  to { width: 100%; }
-}
-#progress {
-  width: 0px;
-  height: 30px;
-  background: red;
-  animation: progress 1s linear;
-  animation-timeline: scroll(element(#body));
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes progress {
+    to { width: 100%; }
+  }
+  #progress {
+    width: 0px;
+    height: 30px;
+    background: red;
+    animation: progress 1s linear;
+    animation-timeline: scroll(element(#body));
+  }
 }
 </pre>
 
 If we use this API for this case, the example code will be as follow:
 
 <pre class='lang-javascript'>
+if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   var animation = div.animate({ width: '100%' }, 1000);
   animation.timeline = new ScrollTimeline(
     { startScrollOffset: '0px' }
   );
+}
 </pre>
 
 ## Combination scroll and time-base animations ## {#combination-scroll-and-time-base-animations-usecase}
@@ -276,8 +284,9 @@ alt="Use case 4: Scrollable slide show.">
 
 This content can't build the CSS only.
 <pre class='lang-javascript'>
+if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   var animation = slideTarget.getAnimation()[0];
-  var scrollTimeline = new ScrollTimeline({ 
+  var scrollTimeline = new ScrollTimeline({
     scrollSource: scrollableElement,
     orientation: "vertical",
     scrollOffset: '0px',
@@ -293,6 +302,7 @@ This content can't build the CSS only.
       animation.timeline = scrollTimeline;
     }
   });
+}
 </pre>
 -->
 
@@ -619,52 +629,56 @@ following effects:
     }
   </pre>
   <pre class="lang-javascript">
-    let progress = document.getElementById("progress");
-    let effect = new KeyframeEffect(
-      progress,
-      [
-        { width: "0vw" },
-        { width: "100vw" }
-      ],
-      {
-        duration: 1000,
-        easing: "linear"
+    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
+      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 timeline = new ScrollTimeline({
-      trigger: new ScrollTrigger({
-        scrollSource: document.documentElement,
-        orientation: "vertical",
-        kind: "range"
-      })      
-    });
-    let animation = new Animation(effect, timeline);
-    animation.play();
+      let animation = new Animation(effect, timeline);
+      animation.play();
+    }
   </pre>
 </div>
 
 <div class="example">
   The same thing with CSS, using 'animation-timeline'
   <pre class="lang-css">
-    @keyframes progress {
-      from {
-        width: 0vw;
+    @media (prefers-reduced-motion: no-preference) {
+      @keyframes progress {
+        from {
+          width: 0vw;
+        }
+        to {
+          width: 100vw;
+        }
       }
-      to {
-        width: 100vw;
+      #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);
       }
     }
-    #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>