diff --git a/examples/svg/min-max.svg b/examples/svg/min-max.svg
index 82e5028..490f6e7 100644
--- a/examples/svg/min-max.svg
+++ b/examples/svg/min-max.svg
@@ -3,12 +3,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="200">
 
   <rect x="10" y="110" width="100" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="2s" max="1s"/>
+    <animate attributeName="fill" from="white" to="red" dur="2s" max="1s"/>
   </rect>
   <rect x="10" y="120" width="200" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="1s" min="2s"/>
+    <animate attributeName="fill" from="white" to="red" dur="1s" min="2s"/>
   </rect>
   <rect x="10" y="130" width="300" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="3s" min="0s" max="indefinite"/>
+    <animate attributeName="fill" from="white" to="red" dur="3s" min="0s" max="indefinite"/>
   </rect>
 </svg>
diff --git a/examples/web/min-max.html b/examples/web/min-max.html
index d01167f..a37eb23 100644
--- a/examples/web/min-max.html
+++ b/examples/web/min-max.html
@@ -9,12 +9,16 @@
     <script src="../web-animations.js"></script>
     <script>
       'use strict';
-      var first = document.getElementById('first');
-      var second = document.getElementById('second');
-      var third = document.getElementById('third');
-      first.animate([{fill: 'red'}, {fill: 'red'}], {duration: 1000});
-      second.animate([{fill: 'red'}, {fill: 'red'}], {duration: 2000});
-      third.animate([{fill: 'red'}, {fill: 'red'}], {duration: 3000});
+
+      var firstPlayer = first.animate([{fill: 'white'}, {fill: 'red'}], {duration: 2000});
+      document.timeline.play(new Animation(null, [], 1000)).onfinish = function() { firstPlayer.cancel(); };
+
+      // We could use a keyframe to freeze the effect, but note that strategy isn't available with motion path effects.
+      // var secondPlayer = second.animate([{fill: 'white'}, {fill: 'red', offset: 0.5}, {fill: 'red'}], {duration: 2000});
+      var secondPlayer = second.animate([{fill: 'white'}, {fill: 'red'}], {duration: 1000, fill: 'forwards'});
+      document.timeline.play(new Animation(null, [], 2000)).onfinish = function() { secondPlayer.cancel(); };
+
+      third.animate([{fill: 'white'}, {fill: 'red'}], {duration: 3000});
     </script>
   </body>
 </html>