Start end time (flackr#60)

* [view-timeline] replace range with start-end times.

* Fix test failures

* Cleanup.

* Package update

* Cleanup

* Rebuild

* Cleanup

* Cleanup

* Start offset removal from ScrollTimeline

* Fix regression with inactive timeline

* Cleanup

* start and end times --> timeRange

* Cleanup

* Address feedback

* Rebuild

* Add issue link

* Fix use in strict-mode.

* Remove clamping

* Throw error on invalid time range

* Fix setNativeCurrentTime for strict mode.

* Cleanup

* TypeError

demo/basic/index.html

@@ -29,6 +29,7 @@ <h1>ScrollTimeline polyfill</h1>
 <div id="container"></div>
 <script src="../../dist/scroll-timeline.js"></script>
 <script>
+    "use strict";
     var elem = document.getElementById('container');
     var st = new ScrollTimeline();
     var a = document.querySelector('#test').animate([

demo/parallax/index.html

@@ -58,6 +58,7 @@
     #pan {
       background-image: url('./images/boulder.jpg');
       background-size: cover;
+      max-width:  716px;
     }
     #wipe {
       height: 20vh;
@@ -161,6 +162,8 @@ <h3>Conclusions</h3>
 </body>
 <script src="../../dist/scroll-timeline.js"></script>
 <script>
+"use strict";
+
 function $(query) {
   return document.querySelector(query);
 }
@@ -169,74 +172,57 @@ <h3>Conclusions</h3>
   let header = $('.header');
   $('.header > .background').animate({
       transform: ['none', 'translateY(30%)']}, {
-      duration: 10000, // Arbitrary duration...
       fill: 'both',
-      timeline: new ScrollTimeline({
-          scrollOffsets: [{target: header, edge: 'end', clamp: true},
-                          {target: header, clamp: true}],
-          fill: 'both',
-      })
+      timeline: new ViewTimeline({subject: header}),
+      timeRange: 'exit'
     });
 }
 
 function animateZoom() {
   let container = $('#zoom');
   $('#zoom > div').animate({
       transform: ['scale(3) translateX(10%)', 'scale(1)']}, {
-      duration: 10000,
       fill: 'both',
-      timeline: new ScrollTimeline({
-          scrollOffsets: [{target: container, edge: 'end', threshold: 1, clamp: true},
-                          {target: container, threshold: 1, clamp: true}],
-          fill: 'both',
-      })
+      timeline: new ViewTimeline({ subject: container }),
+      timeRange: 'contain 20% 80%'
   });
 }
 
 function animatePan() {
   let container = $('#pan');
   $('#pan').animate({
       backgroundPosition: ['left center', 'right center']}, {
-      duration: 10000,
       fill: 'both',
-      timeline: new ScrollTimeline({
-          scrollOffsets: [{target: container, edge: 'end', clamp: true},
-                          {target: container, clamp: true}],
-          fill: 'both',
-      })
+      timeline: new ViewTimeline({ subject: container }),
+      timeRange: 'contain'
   });
 }
 
 function animateWipe() {
   let container = $('#wipe');
   $('#wipe > .top').animate({
       width: ['100%', '0']}, {
-      duration: 10000,
       fill: 'both',
-      timeline: new ScrollTimeline({
-          scrollOffsets: [{target: container, edge: 'end', clamp: true},
-                          {target: container, clamp: true}],
-          fill: 'both',
-      })
+      timeline: new ViewTimeline({ subject: container }),
+      timeRange: 'contain'
   });
 }
 
 function animateHeaders() {
   let headers = document.querySelectorAll('h2, h3');
   for (let i = 0; i < headers.length; i++) {
-    headers[i].animate([
-        {transform: 'translateX(-10px)',
-         opacity: 0},
-        {transform: 'none',
-         opacity: 1}], {
-        duration: 10000,
-        fill: 'both',
-        timeline: new ScrollTimeline({
-            scrollOffsets: [{target: headers[i], edge: 'end', rootMargin: '-20px', clamp: true},
-                            {target: headers[i], edge: 'end', threshold: 1, rootMargin: '-20px', clamp: true}],
-            fill: 'both',
-        })
-    });
+    const keyframes = [
+      { backgroundColor: 'white' },
+      { backgroundColor: 'rgb(183, 220, 233)' },
+      { backgroundColor: 'white' },
+    ];
+    headers[i].animate(
+        keyframes,
+        {
+          fill: 'both',
+          timeline: new ViewTimeline({ subject: headers[i] }),
+          timeRange: 'contain'
+        });
   }
 }
 
@@ -252,7 +238,6 @@ <h3>Conclusions</h3>
 }
 
 function init() {
-  // TODO: These should be updated to work with view-timeline polyfill.
   initCode([
     animateParallax,
     animateHeaders,

demo/view-timeline/index.html

@@ -96,12 +96,20 @@
   <div id="overlay">
     <div class="progress-bar" style="top: 20px;"><span>cover</span></div>
     <div class="progress-bar" style="top: 70px;"><span>contain</span></div>
-    <div class="progress-bar" style="top: 120px;"><span>start</span></div>
-    <div class="progress-bar" style="top: 170px;"><span>end</span></div>
+    <div class="progress-bar" style="top: 120px;"><span>enter</span></div>
+    <div class="progress-bar" style="top: 170px;"><span>exit</span></div>
+    <div class="progress-bar" style="top: 220px">
+      <span>contain 25% 75%</span>
+    </div>
+    <div class="progress-bar" style="top: 270px">
+      <span>enter 150% exit -50%</span>
+    </div>
     <div class="progress-bar-progress" style="top: 20px;"></div>
     <div class="progress-bar-progress" style="top: 70px;"></div>
     <div class="progress-bar-progress" style="top: 120px;"></div>
     <div class="progress-bar-progress" style="top: 170px;"></div>
+    <div class="progress-bar-progress" style="top: 220px;"></div>
+    <div class="progress-bar-progress" style="top: 270px;"></div>
   </div>
   <input type="radio" name="layout" id="vertical-tb" checked>
   <label for="vertical">Vertical top to bottom</label>
@@ -112,16 +120,18 @@
 </body>
 <script src="../../dist/scroll-timeline.js"></script>
 <script type="text/javascript">
+  "use strict";
+
   const progressBars = document.querySelectorAll('.progress-bar-progress');
   const createProgressAnimation = (bar, range, orientation) => {
     const target = document.getElementById('target');
     const viewTimeline = new ViewTimeline({
       'subject': target,
-      'range': range,
-      'orientation': orientation
+      'axis': orientation
     });
     bar.animate( { width: ['0px', '200px' ] }, {
       timeline: viewTimeline,
+      timeRange: `${range}`,
       fill: 'both'
     });
   }
@@ -132,12 +142,18 @@
     });
     createProgressAnimation(progressBars[0], 'cover', orientation);
     createProgressAnimation(progressBars[1], 'contain', orientation);
-    createProgressAnimation(progressBars[2], 'start', orientation);
-    createProgressAnimation(progressBars[3], 'end', orientation);
+    createProgressAnimation(progressBars[2], 'enter', orientation);
+    createProgressAnimation(progressBars[3], 'exit', orientation);
+    createProgressAnimation(progressBars[4], 'contain 25% 75%', orientation);
+    createProgressAnimation(progressBars[5], 'enter 150% exit -50%',
+                            orientation);
   };
 
   document.querySelectorAll('input').forEach(input => {
     input.addEventListener('change', (evt) => {
+      document.getAnimations().forEach(anim => {
+        anim.cancel();
+      });
       const selection = event.target.id;
       switch(selection) {
         case 'vertical-tb':

index.html

@@ -18,9 +18,9 @@
     <li>
         <a href="demo/basic/css.html">demo/basic/css</a>
     </li>
-    <!-- <li>
+    <li>
         <a href="demo/parallax/">demo/parallax</a>
-    </li> -->
+    </li>
     <!-- <li>
         <a href="demo/parallax/unclamped.html">demo/parallax/unclamped</a>
     </li> -->