[css-workletanimation] merge changes from original repo since migration (w3c#801)

* Fixed typos and mistakes in code examples. (w3c#107)

* fixed: wrong camelCase: KeyFrameEffect -> KeyframeEffect
* fixed typo: WorklerAnimation -> WorkletAnimation
* added missing CSS object, and
* updated index.html

* Add [Exposed] to interfaces (w3c#109)

Add appropriate [Exposed] to interfaces.

https://heycam.github.io/webidl/#idl-interfaces says:
"Non-callback interfaces which are not annotated with a [NoInterfaceObject] extended attribute, and callback interfaces which declare constants must be annotated with an [Exposed] extended attribute."

Author: majido

css-animationworklet/Overview.bs

@@ -176,13 +176,14 @@ The {{animationWorklet}}'s <a>worklet global scope type</a> is {{AnimationWorkle
 {{AnimationWorkletGlobalScope}} represents the global execution context of {{animationWorklet}}.
 
 <xmp class='idl'>
+[Exposed=Window]
 partial namespace CSS {
     [SameObject] readonly attribute Worklet animationWorklet;
 };
 </xmp>
 
 <xmp class='idl'>
-[ Exposed=AnimationWorklet, Global=AnimationWorklet ]
+[Exposed=AnimationWorklet, Global=AnimationWorklet]
 interface AnimationWorkletGlobalScope : WorkletGlobalScope {
     void registerAnimator(DOMString name, VoidFunction animatorCtor);
 };
@@ -511,9 +512,8 @@ Creating a Worklet Animation {#creating-worklet-animation}
 -----------------------------------------------------------
 
 <xmp class='idl'>
-
-
-[Constructor (DOMString animatorName,
+[Exposed=Window,
+ Constructor (DOMString animatorName,
               optional (AnimationEffect or sequence<AnimationEffect>)? effects = null,
               optional AnimationTimeline? timeline,
               optional any options)]
@@ -689,7 +689,7 @@ times</a>. This allows a single worklet animation to coordinate multiple effects
 [[#example-2]] for an example of such a use-case.
 
 <xmp class='idl'>
-
+[Exposed=AnimationWorklet]
 interface WorkletGroupEffect {
   sequence<AnimationEffect> getChildren();
 };
@@ -754,7 +754,7 @@ const documentTimeline = document.timeline;
 // currenTime values directly.
 const animation = new WorkletAnimation(
     'hidey-bar',
-    new KeyFrameEffect($header,
+    new KeyframeEffect($header,
                         [{transform: 'translateX(100px)'}, {transform: 'translateX(0px)'}],
                         {duration: 1000, iterations: 1, fill: 'both' }]),
     scrollTimeline,
@@ -823,10 +823,10 @@ sync with scroll offset.
 await CSS.animationWorklet.addModule('twitter-header-animator.js');
 const animation = new WorkletAnimation(
     'twitter-header',
-    [new KeyFrameEffect($avatar,  /* scales down as we scroll up */
+    [new KeyframeEffect($avatar,  /* scales down as we scroll up */
                     [{transform: 'scale(1)'}, {transform: 'scale(0.5)'}],
                     {duration: 1000, iterations: 1}),
-    new KeyFrameEffect($header, /* loses transparency as we scroll up */
+    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}));

css-animationworklet/README.md

@@ -132,7 +132,7 @@ hooks:
 
 ```js
 // in document scope
-new WorklerAnimation('animation-with-local-state', [], [], {value: 1});
+new WorkletAnimation('animation-with-local-state', [], [], {value: 1});
 ```
 
 
@@ -176,16 +176,16 @@ it animates fully to close or open position depending on its current position.
 </div>
 
 <script>
-animationWorklet.addModule('hidey-bar-animator.js');
+await CSS.animationWorklet.addModule('hidey-bar-animator.js');
 const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 100});
 const documentTimeline = document.timeline;
 
 
 const animation = new WorkletAnimation('hidey-bar',
-  new KeyFrameEffect($header,
+  new KeyframeEffect($header,
                       [{transform: 'translateX(100px)'}, {transform: 'translateX(0px)'}],
                       {duration: 100, iterations: 1, fill: 'both' })
-  scrollTimeline, 
+  scrollTimeline,
   {scrollTimeline, documentTimeline},
 );
 animation.play();
@@ -242,12 +242,12 @@ sync with scroll offset.
 </div>
 
 <script>
-await animationWorklet.addModule('twitter-header-animator.js');
+await CSS.animationWorklet.addModule('twitter-header-animator.js');
 const animation = new WorkletAnimation('twitter-header',
-  [new KeyFrameEffect($avatar,  /* scales down as we scroll up */
+  [new KeyframeEffect($avatar,  /* scales down as we scroll up */
                       [{transform: 'scale(1)'}, {transform: 'scale(0.5)'}],
                       {duration: 1000, iterations: 1}),
-    new KeyFrameEffect($header, /* loses transparency as we scroll up */
+    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}),
@@ -295,7 +295,7 @@ registerAnimator('twitter-header', class {
 </div>
 
 <script>
-await animationWorklet.addModule('parallax-animator.js');
+await CSS.animationWorklet.addModule('parallax-animator.js');
 const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
 const scrollRange = $scrollingContainer.scrollHeight - $scrollingContainer.clientHeight;