<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/w3c/css-houdini-drafts/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From ce5780b5e14f6435ef5377f9b941b5b454d88f21 Mon Sep 17 00:00:00 2001
From: Majid Valipour <majidvp@chromium.org>
Date: Mon, 27 Aug 2018 15:07:34 -0400
Subject: [PATCH] [css-animationworklet] update ScrollTimeline usage in
 examples to match latest syntax

---
 css-animationworklet/Overview.bs | 19 ++++++++++++++++---
 css-animationworklet/README.md   | 23 ++++++++++++++++++-----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/css-animationworklet/Overview.bs b/css-animationworklet/Overview.bs
index 62dc5c73..f49c3470 100644
--- a/css-animationworklet/Overview.bs
+++ b/css-animationworklet/Overview.bs
@@ -747,7 +747,11 @@ animates fully to close or open position depending on its current position.
 
 <script>

 await CSS.animationWorklet.addModule('hidey-bar-animator.js');
-const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
+const scrollTimeline = new ScrollTimeline({
+  scrollSource: $scrollingContainer,
+  orientation: 'block',
+  timeRange: 1000
+});
 const documentTimeline = document.timeline;
 
 // Note we pass in two timelines in the options bag which allows the animation to read their
@@ -829,7 +833,12 @@ const animation = new WorkletAnimation(
     new KeyFrameEffect($header, /* loses transparency as we scroll up */
                     [{opacity: 0}, {opacity: 0.8}],
                     {duration: 1000, iterations: 1})],
-    new ScrollTimeline($scrollingContainer, {timeRange: 1000, startScrollOffset: 0, endScrollOffset: $header.clientHeight}));
+    new ScrollTimeline({
+      scrollSource: $scrollingContainer,
+      orientation: 'block',
+      timeRange: 1000,
+      startScrollOffset: 0,
+      endScrollOffset: $header.clientHeight}));
 animation.play();
 
 // Since this animation is using a group effect, the same animation instance
@@ -880,7 +889,11 @@ A simple parallax background example.
 
 <script>
 await CSS.animationWorklet.addModule('parallax-animator.js');
-const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
+const scrollTimeline = new ScrollTimeline({
+  scrollSource: $scrollingContainer,
+  orientation: 'block',
+  timeRange: 1000
+});
 const scrollRange = $scrollingContainer.scrollHeight - $scrollingContainer.clientHeight;
 
 const slowParallax = new WorkletAnimation(
diff --git a/css-animationworklet/README.md b/css-animationworklet/README.md
index aad68123..1bf075e2 100644
--- a/css-animationworklet/README.md
+++ b/css-animationworklet/README.md
@@ -177,7 +177,11 @@ it animates fully to close or open position depending on its current position.
 
 <script>
 animationWorklet.addModule('hidey-bar-animator.js');
-const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 100});
+const scrollTimeline = new ScrollTimeline({
+  scrollSource: $scrollingContainer,
+  orientation: 'block',
+  timeRange: 100
+});
 const documentTimeline = document.timeline;
 
 
@@ -185,7 +189,7 @@ const animation = new WorkletAnimation('hidey-bar',
   new KeyFrameEffect($header,
                       [{transform: 'translateX(100px)'}, {transform: 'translateX(0px)'}],
                       {duration: 100, iterations: 1, fill: 'both' })
-  scrollTimeline, 
+  scrollTimeline,
   {scrollTimeline, documentTimeline},
 );
 animation.play();
@@ -249,8 +253,13 @@ const animation = new WorkletAnimation('twitter-header',
                       {duration: 1000, iterations: 1}),
     new KeyFrameEffect($header, /* loses transparency as we scroll up */
                       [{opacity: 0}, {opacity: 0.8}],
-                      {duration: 1000, iterations: 1})] ,
-    new ScrollTimeline($scrollingContainer, {timeRange: 1000, startScrollOffset: 0, endScrollOffset: $header.clientHeight}),
+                      {duration: 1000, iterations: 1})],
+    new ScrollTimeline({
+      scrollSource: $scrollingContainer,
+      timeRange: 1000,
+      orientation: 'block',
+      startScrollOffset: 0,
+      endScrollOffset: $header.clientHeight}),
 );
 animation.play();
 </script>
@@ -296,7 +305,11 @@ registerAnimator('twitter-header', class {
 
 <script>
</script>
 await animationWorklet.addModule('parallax-animator.js');
-const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
+const scrollTimeline = new ScrollTimeline({
+  scrollSource: $scrollingContainer,
+  orientation: 'block',
+  timeRange: 1000
+});
 const scrollRange = $scrollingContainer.scrollHeight - $scrollingContainer.clientHeight;
 
 const slowParallax = new WorkletAnimation(
