<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>

diff --git a/css-animationworklet/Overview.bs b/css-animationworklet/Overview.bs
index 033cff09..2f16c426 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 c21371cc..cdcd93f6 100644
--- a/css-animationworklet/README.md
+++ b/css-animationworklet/README.md
@@ -177,7 +177,12 @@ it 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: 100});
+
+const scrollTimeline = new ScrollTimeline({
+  scrollSource: $scrollingContainer,
+  orientation: 'block',
+  timeRange: 100
+});
 const documentTimeline = document.timeline;
 
 
@@ -249,8 +254,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 +306,11 @@ registerAnimator('twitter-header', class {
 
 <script>
</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(
