Renormalize timing on source resize (#172)

demo/view-timeline/index.html

@@ -16,6 +16,7 @@
     overflow-y:  scroll;
     position:  relative;
     align-items:  flex-start;
+    resize: both;
   }
 
   #container.rtl {

src/proxy-animation.js

@@ -524,7 +524,7 @@ function playInternal(details, autoRewind) {
 
   // Additional step for the polyfill.
   addAnimation(details.timeline, details.animation,
-               tickAnimation.bind(details.proxy));
+               tickAnimation.bind(details.proxy), renormalizeTiming.bind(details.proxy));
 
   // 7. If animation's hold time is resolved, let its start time be
   //    unresolved.
@@ -601,6 +601,12 @@ function tickAnimation(timelineTime) {
   }
 }
 
+function renormalizeTiming() {
+  const details = proxyAnimations.get(this);
+  // Force renormalization.
+  details.specifiedTiming = null;
+}
+
 function notifyReady(details) {
   if (details.pendingTask == 'pause') {
     commitPendingPause(details);
@@ -747,8 +753,7 @@ function createProxyEffect(details) {
         target.apply(effect, [details.specifiedTiming]);
       }
       target.apply(effect, argumentsList);
-      // Force renormalization.
-      details.specifiedTiming = null;
+      renormalizeTiming()
     }
   };
   const proxy = new Proxy(effect, handler);
@@ -935,7 +940,7 @@ export class ProxyAnimation {
           // Additional polyfill step needed to associate the animation with
           // the scroll timeline.
           addAnimation(details.timeline, details.animation,
-                       tickAnimation.bind(this));
+                       tickAnimation.bind(this), renormalizeTiming.bind(this));
           break;
 
         //   If previous play state is paused:

src/scroll-timeline-base.js

@@ -162,9 +162,11 @@ function updateSource(timeline, source) {
   if (oldSource == source)
     return;
 
-  if (oldSource && oldScrollListener) {
-    scrollEventSource(oldSource).removeEventListener("scroll",
-                                                     oldScrollListener);
+  if (oldSource) {
+    details.resizeObserver.unobserve(oldSource);
+    if (oldScrollListener) {
+      scrollEventSource(oldSource).removeEventListener("scroll", oldScrollListener);
+    }
   }
   scrollTimelineOptions.get(timeline).source = source;
   if (source) {
@@ -173,6 +175,7 @@ function updateSource(timeline, source) {
     };
     scrollEventSource(source).addEventListener("scroll", listener);
     details.scrollListener = listener;
+    details.resizeObserver.observe(source)
   }
 }
 
@@ -196,8 +199,9 @@ export function removeAnimation(scrollTimeline, animation) {
  * @param scrollTimeline {ScrollTimeline}
  * @param animation {Animation}
  * @param tickAnimation {function(number)}
+ * @param renormalizeTiming {function()}
  */
-export function addAnimation(scrollTimeline, animation, tickAnimation) {
+export function addAnimation(scrollTimeline, animation, tickAnimation, renormalizeTiming) {
   let animations = scrollTimelineOptions.get(scrollTimeline).animations;
   for (let i = 0; i < animations.length; i++) {
     // @TODO: This early return causes issues when a page with the polyfill
@@ -211,11 +215,20 @@ export function addAnimation(scrollTimeline, animation, tickAnimation) {
 
   animations.push({
     animation: animation,
-    tickAnimation: tickAnimation
+    tickAnimation: tickAnimation,
+    renormalizeTiming: renormalizeTiming
   });
   updateInternal(scrollTimeline);
 }
 
+function renormalizeAnimationTimings(scrollTimeline) {
+  let animations = scrollTimelineOptions.get(scrollTimeline).animations;
+  for (const animation of animations) {
+    animation.renormalizeTiming()
+    updateInternal(scrollTimeline)
+  }
+}
+
 // TODO: this is a private function used for unit testing add function
 export function _getStlOptions(scrollTimeline) {
   return scrollTimelineOptions.get(scrollTimeline);
@@ -235,7 +248,8 @@ export class ScrollTimeline {
 
       // Internal members
       animations: [],
-      scrollListener: null
+      scrollListener: null,
+      resizeObserver: new ResizeObserver(() => renormalizeAnimationTimings(this))
     });
     const source =
       options && options.source !== undefined ? options.source