<pre class='metadata'>
Title:  CSS Animation Worklet API
Status: ED
Group: houdini
ED: https://drafts.css-houdini.org/css-animationworklet-1/
TR: https://www.w3.org/TR/css-animation-worklet-1/
Shortname: css-animationworklet
Level: 1
Abstract:
Editor: Majid Valipour, majidvp@google.com, w3cid 81464
Editor: Robert Flack, flackr@chromium.org, w3cid 98451
Editor: Stephen McGruer, smcgruer@chromium.org, w3cid 96463
Ignored Terms: AnimationWorklet
</pre>

<pre class="link-defaults">
spec:infra; type:dfn; text:list
spec:dom; type:interface; text:Document
</pre>

<pre class="anchors">
urlPrefix: https://heycam.github.io/webidl/; type: dfn;
    text: NotSupportedError
    urlPrefix: #dfn-;
        text: callback this value
        text: exception
        text: throw
        url: throw; text: thrown
    urlPrefix: #;
        url: Function; text: Function
        url: VoidFunction; text: VoidFunction
    url: invoke-a-callback-function; text: Invoke
    url: construct-a-callback-function; text: constructing
    url: es-type-mapping; text: converting
urlPrefix: https://html.spec.whatwg.org/#; type: dfn;
    url: run-the-animation-frame-callbacks; text: running the animation frame callbacks
urlPrefix: http://w3c.github.io/html/infrastructure.html#; type: dfn;
    text: structuredserialize
    text: structureddeserialize
urlPrefix: https://www.w3.org/TR/css3-transitions/#; type: dfn;
    text: animatable properties
urlPrefix: https://drafts.csswg.org/web-animations#; type: dfn;
    url: the-documents-default-timeline; text: default document timeline
    url: concept-animation; text: animation
    text: effect value
    text: effect stack
    text: target property
    text: timeline
    text: animation effect
    text: current time
    text: local time
    text: inherited time
    text: ready
    text: play state
    text: playback rate
    text: set the target effect of an animation
    text: set the timeline of an animation
    text: finished
    text: idle
    text: paused
    text: pending
    text: running
    text: composite operation
    text: animation class
    text: replace state
    text: active
    text: persisted
    text: removed
    text: start delay
    text: end delay
    text: fill mode
    text: iteration start
    text: iteration count
    text: iteration duration
    text: playback direction
    text: timing function
    text: set the start time
    text: set the current time
    text: update the timing properties of an animation effect



urlPrefix: https://w3c.github.io/web-animations/level-2/#;
    type: dfn;
        text: group effect
        text: child effect
urlPrefix: https://tc39.github.io/ecma262/#sec-; type: dfn;
    text: IsCallable
    text: IsConstructor
    text: HasProperty
    url: ecmascript-data-types-and-values; text: Type
    url: map-objects; text:map object
    url: get-o-p; text: Get
    url: set-o-p-v-throw; text: Set
    url: samevalue; text: SameValue
    urlPrefix: native-error-types-used-in-this-standard-
        text: TypeError
urlPrefix: https://www.w3.org/TR/hr-time-2/#dom-; type: dfn
    text: DOMHighResTimeStamp
urlPrefix: https://wicg.github.io/scroll-animations/#; type: interface
    url: scrolltimeline; text: ScrollTimeline
    url: dictdef-scrolltimelineoptions; text: ScrollTimelineOptions
    url: dom-scrolltimeline-scrollsource; text: scrollSource
urlPrefix: https://wicg.github.io/scroll-animations/#; type: dfn
    url: current-time-algorithm; text: current time of the ScrollTimeline;
</pre>

<pre class=biblio>
{
    "explainer": {
        "href": "https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/README.md",
        "title": "Animation Worklet Explainer",
        "deliveredBy": [
            "https://github.com/w3c/css-houdini-drafts"
        ]
    },
    "principles": {
        "href": "https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/principles.md",
        "title": "Animation Worklet Design Principles and Goals",
        "deliveredBy": [
            "https://github.com/w3c/css-houdini-drafts"
        ]
    }
}
</pre>

Introduction {#intro}
=====================
<em>This section is not normative.</em>

This document introduces a new primitive that provides extensibility in web animations and enables
high performance interactive procedural animations on the web. For details on the rationale and
motivation see both [[explainer]] and [[principles]].

The [=Animation Worklet=] API provides a method to create scripted animations that control a set
of [=animation effects=]. The API is designed to make it possible for user agents to run such
animations in their own dedicated thread to provide a degree of performance isolation from main
thread.

Relationship to the Web Animations API {#relationship-to-web-animations}
------------------------------------------------------------------------
<em>This section is not normative.</em>

Animations running inside an [=Animation Worklet=] execution context expose the {{Animation}}
interface from the Web Animations specification on the main javascript execution context. This means
they can be controlled and inspected from main thread using the same Web Animation APIs.


Animation Worklet {#animation-worklet-desc}
===========================================
<dfn>Animation Worklet</dfn> is a {{Worklet}} responsible for all classes related to custom
animations. The worklet can be accessed via {{animationWorklet}} attribute.

<xmp class='idl'>
[Exposed=Window]
partial namespace CSS {
    [SameObject] readonly attribute Worklet animationWorklet;
};
</xmp>

The {{animationWorklet}}'s [=worklet global scope type=] is {{AnimationWorkletGlobalScope}}.

{{AnimationWorkletGlobalScope}} represents the global execution context of {{animationWorklet}}.

<xmp class='idl'>

[ Global=(Worklet,AnimationWorklet), Exposed=AnimationWorklet ]
interface AnimationWorkletGlobalScope : WorkletGlobalScope {
    void registerAnimator(DOMString name, AnimatorInstanceConstructor animatorCtor);
};

callback AnimatorInstanceConstructor = any (any options, optional any state);

</xmp>


Animator {#animator-desc}
=========================

An <dfn>Animator</dfn> represents a custom animation that is running inside
{{AnimationWorkletGlobalScope}}. Each Animator is associated with an [=animation=] instance (of
type {{WorkletAnimation}}) in the document and determines how that animation progresses its
[=animation effect=]. The <code>animate</code> function contains the logic responsible for
translating the animation current time into appropriate progress of the animation effect. An
animator can only be instantiated by construction of a {{WorkletAnimation}} in the document.


Two animators types are supported: [=Stateless Animator=] and [=Stateful Animator=] each
providing a different state management strategy.


Stateless Animator {#stateless-animator-desc}
---------------------------------------------

A <dfn>Stateless Animator</dfn> is a type of animator does not depend on any local state either
stored on the instance or global scope. Effectively, the animate function of an
[=Stateless Animator=] can be treated as a pure function with the expectation that given the same
input, it produces the same output.


<div class='note'>
    This is how an stateless animator class should look.
    <pre class='lang-javascript'>
        class FooAnimator {
            constructor(options) {
                // Called when a new animator is instantiated.
            }
            animate(currentTime, effect) {
                // Animation frame logic goes here.
            }
        }
    </pre>
</div>

Note: The statelessness allows animation worklet to perform optimization such as producing multiple
animation frames in parallel, sharing a single animator instance for multiple animations, and
performing very cheap teardown and setup. Using [=Stateless Animator=] is highly recommended to
enable such optimizations.

Stateful Animator {#stateful-animator-desc}
-------------------------------------------

A <dfn>Stateful Animator</dfn> is a type of animator that can have local state and animation worklet
guarantees that it maintains this state as long as the stateful animator fulfills the contract
required by its interface and as described following.


[=Animation worklet=] maintains a set of {{WorkletGlobalScope}}s which may exist across different
threads or processes. Animation worklet may temporarily terminate a global scope (e.g., to preserve
resources) or move a running [=animator instance=] across different global scopes (e.g., if its
effect is mutable only in a certain thread). Animation worklet guarantees that a stateful animator
instance's state is maintained even if the instance is respawned in a different global scope.

The basic mechanism for maintaining the state is that the animation worklet snapshots the local
state that is exposed via the [=state function=] and then reifies it so that it can be passed into
the constructor when the animator instance is respawned at a later time in a potentially different
global scope. The [=migrate an animator instance=] algorithm specifies this process in details.

A user-defined stateful animator is expected to fulfill the required contract which is that its
state function returns an object representing its state that can be serialized using structured
serialized algorithm and that it can also recreate its state given that same object passed to its
constructor.

<div class='note'>
    This is how a stateful animator class should look.
    <pre class='lang-javascript'>
        class BarAnimator {
            constructor(options, state) {
              // Called when a new animator is instantiated (either first time or after being respawned).
              this.currentVelocity  = state ? state.velocity : 0;
            }
            animate(currentTime, effect) {
                // Animation frame logic goes here and can rely on this.currentVelocity.
                this.currentVelocity += 0.1;
            }
            state() {
              // The returned object should be serializable using structured clonable algorithm.
              return {
                velocity: this.currentVelocity;
              }
            }
        }
    </pre>
</div>


Animator Definition {#animator-definition-desc}
-----------------------------------------------

An <dfn>animator definition</dfn> is a [=struct=] which describes the author defined custom
animation logic. It consists of:

 -  : <dfn>animator name</dfn>
    :: A <<ident>>#.

 -  : <dfn>class constructor</dfn>
    :: A {{AnimatorInstanceConstructor}} [=callback function=] type.

 -  : <dfn>animate function</dfn>
    :: A [=Function=] [=callback function=] type.

 -  : <dfn>state function</dfn>
    :: A [=Function=] [=callback function=] type.

 -  : <dfn for="animator definition">stateful flag</dfn>
    :: A boolean flag


A <dfn>stateful animator definition</dfn> is an [=animator definition=] whose
[=animator definition/stateful flag=] is <b>true</b>.


A <dfn>document animator definition</dfn> is a [=struct=] which describes the information needed by
the [=document=] about the author defined custom animation. It consists of:

 -  : <dfn for="document animator definition">stateful flag</dfn>
    :: A boolean flag

Registering an Animator Definition {#registering-animator-definition}
---------------------------------------------------------------------
The [=document=] has a [=map=] of <dfn>document animator definitions</dfn>. The map gets populated
when {{registerAnimator(name, animatorCtor)}} is called.

An {{AnimationWorkletGlobalScope}} has a [=map=] of <dfn>animator definitions</dfn>. The map gets
populated when {{registerAnimator(name, animatorCtor)}} is called.

Note that to register a [=stateful animator definition=] it is simply enough for the registered
class to have a <code>state</code> function.

<div algorithm="register-animator">

When the <dfn method for=AnimationWorkletGlobalScope>registerAnimator(|name|, |animatorCtor|)</dfn>
method is called in a {{AnimationWorkletGlobalScope}}, the user agent <em>must</em> run the
following steps:

    1. If |name| is not a valid <<ident>>, [=throw=] a [=TypeError=] and abort all these
        steps.

    2. Let |animatorDefinitions| be the {{AnimationWorkletGlobalScope}}'s
        [=animator definitions=] [=map=].

    3. If |animatorDefinitions|[|name|] [=map/exists=], [=throw=] a [=NotSupportedError=]
        and abort all these steps.

    4. If the result of [=IsConstructor=](|animatorCtor|) is <b>false</b>, [=throw=] a
        [=TypeError=] and abort all these steps.

    5. Let |prototype| be the result of [=Get=](|animatorCtor|, "prototype").

    6. Let |animateFuncValue| be the result of [=Get=](|prototype|, "animate").

    7. Let |animateFunc| be the result of [=converting=] |animateFuncValue| to the [=Function=]
        [=callback function=] type. If an exception is thrown, rethrow the exception and abort
        all these steps.

    8. Let |stateFuncValue| be the result of [=Get=](|prototype|, "state").

    9. Let |stateFunc| be the result of [=converting=] |stateFuncValue| to the [=Function=]
        [=callback function=] type, If an exception is thrown, set |stateful| to be <b>false</b>,
        otherwise set |stateful| to be <b>true</b> and |stateFunc| to be undefined.

    10. Let |definition| be a new [=animator definition=] with:

        - [=animator name=] being |name|

        - [=class constructor=] being |animatorCtor|

        - [=animate function=] being |animateFunc|

        - [=state function=] being |stateFunc|

        - [=animator definition/stateful flag=] being |stateful|


    9. [=map/set=] the |animatorDefinitions|[|name|] to |definition|.

    10. [=Queue a task=] to run the following steps:

        1. Let |documentAnimatorDefinitions| be the associated [=document's=]
            [=document animator definitions=] [=map=].

        2. Let |documentDefinition| be a new [=document animator definition=] with:

            - [=animator definition/stateful flag=] being |stateful|

        3. If |documentAnimatorDefinitions|[|name|] [=map/exists=], run the following steps:

            1. Let |existingDocumentDefinition| be the result of [=map/get=]
                |documentAnimatorDefinitions|[|name|].

            2. If |existingDocumentDefinition| is <code>"invalid"</code>, abort all these steps.

            3. If |existingDocumentDefinition| and |documentDefinition| are not equivalent, (that is
                their [=document animator definition/stateful flag=]s are
                different), then:

                [=map/set=] |documentAnimatorDefinitions|[|name|] to <code>"invalid"</code>.

                Log an error to the debugging console stating that the same class was registered
                with different <code>stateful flag</code>.

        4. Otherwise, [=map/set=] |documentAnimatorDefinitions|[|name|] to
            |documentDefinition|.

</div>


Animator Effect {#animator-effect-desc}
---------------------------------------

A <dfn>Animator Effect</dfn> represents the underlying [=animation effect=] inside animation
worklet.

It has a <dfn>corresponding effect</dfn> property which is a reference to the underlying
[=animation effect=]. It also has corresponding properties for the following
[=animation effect=]'s properties:
     *    [=local time=],
     *    [=start delay=],
     *    [=end delay=],
     *    [=fill mode=],
     *    [=iteration start=],
     *    [=iteration count=],
     *    [=iteration duration=],
     *    [=playback direction=], and
     *    [=timing function=].

[=Animator Effect=] is represented by the {{WorkletAnimationEffect}} interface
inside {{AnimationWorkletGlobalScope}}.

<xmp class='idl'>

[ Exposed=AnimationWorklet ]
interface WorkletAnimationEffect {
    EffectTiming         getTiming();
    ComputedEffectTiming getComputedTiming();
    attribute double? localTime;
};

</xmp>

Note: {{WorkletAnimationEffect}} is basically a restricted version of {{AnimationEffect}} interface
  which does not have {{AnimationEffect/updateTiming}} but additionally allows local time to be set.

<div class=methods>

:   <dfn method for=WorkletAnimationEffect>getTiming()</dfn>
::  Returns the specified timing properties using the corresponding properties.

:   <dfn method for=WorkletAnimationEffect>getComputedTiming()</dfn>
::  Returns the calculated timing properties using the corresponding properties.

:   <dfn attribute for=WorkletAnimationEffect>localTime</dfn>
::  Getting the attribute returns the corresponding [=local time=].
    Setting the attribute updates the local time given this effect as |effect|
    and the attribute value as |time|:

    1. If the |time| is the same as |effect|'s [=local time=] then skip following steps.

    2. Set the |effect|'s [=local time=] to |time|.

    3. Set the |effect|'s animator instance's [=sync requested flag=] to <b>true</b>.

</div>


Animator Instance {#animator-instance-section}
==============================================

An <dfn>animator instance</dfn> is a [=struct=] which describes a fully realized custom
[=animator=] in an {{AnimationWorkletGlobalScope}}. It has a reference to an
[=animator definition=] and owns the instance specific state such as animation effect and
timeline. It consists of:

 -  : [=animator name=]
    :: A string used to identify the animator definition.

 -  : [=frame requested flag=]
    :: A boolean flag that indicates if the animator needs to animate.

 -  : <dfn>sync requested flag</dfn>
    :: A flag that indicates if the animator needs to sync its output.

 -  : <dfn>effect</dfn>
    :: An [=Animator Effect=].

 -  : <dfn>animator current time</dfn>
    :: A time value equivalent to the corresponding [=worklet animation=]'s current time.

 -  : <dfn>animator timeline</dfn>
    :: The [=timeline=] of the corresponding [=worklet animation=].

 -  : <dfn>animator serialized options</dfn>
    :: The serializable object representing the options to be used when constructing the animator
        instance.

A <dfn>stateful animator instance</dfn> is an [=animator instance=] whose corresponding
definition is a [=stateful animator definition=].



Creating an Animator Instance {#creating-animator-instance}
-----------------------------------------------------------

Each [=animator instance=] lives in an {{AnimationWorkletGlobalScope}}.

Each {{AnimationWorkletGlobalScope}} has an <dfn>animator instance set</dfn>. The set is populated
when the user agent constructs a new [=animator instance=] in the {{AnimationWorkletGlobalScope}}
scope. Each [=animator instance=] corresponds to a worklet animation in the document scope.

<div algorithm="create-animator">

To <dfn>create a new animator instance</dfn> given a |name|, |timeline|, |effect|,
|serializedOptions|, |serializedState|, and |workletGlobalScope|, the user agent <em>must</em> run
the following steps:

    1. Let the |definition| be the result of looking up |name| on the |workletGlobalScope|'s
         [=animator definitions=].

          If |definition| does not exist abort the following steps.

    2. Let |animatorCtor| be the [=class constructor=] of |definition|.

    3. Let |options| be [=StructuredDeserialize=](|serializedOptions|).

    4. Let |state| be [=StructuredDeserialize=](|serializedState|).

    5. Let |animatorInstance| be the result of [=constructing=] |animatorCtor| with
        «|options|, |state|» as arguments. If an exception is thrown, rethrow the exception and
        abort all these steps.

    6. Let |animatorEffect| be the result of [=constructing=] a {{WorkletAnimationEffect}}
        with its [=corresponding effect=] being |effect|.

    7. Set the following on |animatorInstance| with:
        - [=animator name=] being |name|
        - [=frame requested flag=] being <b>false</b>
        - [=sync requested flag=] being <b>false</b>
        - [=animator current time=] being unresolved
        - [=effect=] being |animatorEffect|
        - [=animator timeline=] being |timeline|
        - [=animator serialized options=] being |options|

    8. Add |animatorInstance| to |workletGlobalScope|'s [=animator instance set=].

</div>


Running Animators {#running-animators}
--------------------------------------

When the user agent wants to produce a new animation frame, if for any [=animator instance=] the
associated [=frame requested flag=] is <b>true</b> then the the user agent <em>must</em>
[=run animators=] for the current frame in all its associated global scopes.

Note: The user agent is not required to run animations on every visual frame. It is legal to defer
      generating an animation frame until a later frame. This allow the user agent to
      provide a different service level according to their policy.

<div algorithm="run-animators">

When the user agent wants to <dfn>run animators</dfn> in a given |workletGlobalScope|, it
<em>must</em> run the following steps:

    1. Iterate over all [=animator instance=]s in the |workletGlobalScope|'s <a>animator instance
        set</a>. For each such |animator| the user agent <em>must</em> perform the following steps:

        1. Let |animatorName| be |animator|'s [=animator name=]

        2. Let the |definition| be the result of looking up |animatorName| on the
            |workletGlobalScope|'s [=animator definitions=].

           If |definition| does not exist then abort the following steps.

        3. If the [=frame requested flag=] for |animator| is <b>false</b> or the effect belonging
            to the |animator| will not be visible within the visual viewport of the current frame
            the user agent <em>may</em> abort all the following steps.

            Issue: Consider giving user agents permission to skip running individual animator
            instances to throttle slow animators.

        4. Let |animateFunction| be |definition|'s [=animate function=].

        5. Let |currentTime| be [=animator current time=] of |animator|.

        6. Let |effect| be [=effect=] of |animator|.

        7. [=Invoke=] |animateFunction| with arguments «|currentTime|, |effect|»,
            and with |animator| as the [=callback this value=].

    2. If any [=animator instance=]s in the |workletGlobalScope|'s [=animator instance set=]
        has its [=sync requested flag=] set to <b>true</b> then [=sync local times to document=]
        given |workletGlobalScope|.

</div>

Note: Although inefficient, it is legal for the user agent to [=run animators=] multiple times
in the same frame.


Issue: should be explicit as to what happens if the animateFunction throws an exception. At least
we should have wording that the localTime values of the effects are ignored to avoid incorrect
partial updates.

Removing an Animator Instance {#removing-animator}
--------------------------------------------------

<div algorithm="remove-animator">

To <dfn>remove an animator instance</dfn> given |animator| and |workletGlobalScope| the user agent
<em>must</em> run the following steps:

1. Remove |animator| from |workletGlobalScope|'s [=animator instance set=].

</div>


Migrating an Animator Instance {#migrating-animator}
----------------------------------------------------

The migration process allows [=stateful animator instance=] to be migrated to a different
{{AnimationWorkletGlobalScope}} without losing their local state.

<div algorithm="migrate-animator">

To <dfn>migrate an animator instance</dfn> from one {{AnimationWorkletGlobalScope}} to another,
given |animator|, |sourceWorkletGlobalScope|, |destinationWorkletGlobalScope|, the user agent
<em>must</em> run the following steps :

  1. Let |serializedState| be undefined.

  2. [=Queue a task=] on |sourceWorkletGlobalScope| to run the following steps:

     1. Let |animatorName| be |animator|'s [=animator name=]

     2. Let |definition| be the result of looking up |animatorName| on |sourceWorkletGlobalScope|'s
        [=animator definitions=].

        If |definition| does not exist then abort the following steps.

     3. Let |stateful| be the [=animator definition/stateful flag=] of |definition|.

     4. If |stateful| is <b>false</b> then abort the following steps.

     5. Let |stateFunction| be |definition|'s [=state function=].

     6. Let |state| be the result of [=Invoke=] |stateFunction| with |animator| as the
        [=callback this value=].  If any exception is thrown, rethrow the exception and abort
        the following steps.

     7. Set |serializedState| to be the result of [=StructuredSerialize=](|state|).
        If any exception is thrown, then abort the following steps.

     8. Run the procedure to [=remove an animator instance=] given |animator|, and
        |sourceWorkletGlobalScope|.

  2. Wait for the above task to complete. If the task is aborted, abort the following steps.

  3. [=Queue a task=] on |destinationWorkletGlobalScope| to run the following steps:

     1. Run the procedure to [=create a new animator instance=] given:
        - The |animator|'s [=animator name=] as name.
        - The |animator|'s [=animator timeline=] as timeline.
        - The |animator|'s [=effect=] as effect.
        - The |animator|'s [=animator serialized options=] as options.
        - The |serializedState| as state.
        - The |destinationWorkletGlobalScope| as workletGlobalScope.

</div>

If an animator state getter throws the user agent will remove the animator but does not recreate it.
This effectively removes the animator instance.


Requesting Animation Frames {#requesting-animation-frames}
----------------------------------------------------------

Each [=animator instance=] has an associated <dfn>frame requested flag</dfn>. It is initially set
to <b>false</b>. Different circumstances can cause the [=frame requested flag=] to be set to
<b>true</b>. These include the following:
  - Changes in the [=current time=] of the animator's [=timeline=]
  - Changes in the [=current time=] of the animator's corresponding [=worklet animation=]

Performing [=run animators=] resets the [=frame requested flag=] on animators to <b>false</b>.


Web Animations Integration {#web-animation-integration}
=======================================================


Worklet Animation {#worklet-animation-desc}
-------------------------------------------
<dfn>Worklet animation</dfn> is a kind of [=animation=] that delegates animating its animation
effect to an [=animator instance=]. It controls the lifetime and playback state of its
[=corresponding animator instance=].

Being an [=animation=], [=worklet animation=] has an [=animation effect=] and a
[=timeline=]. However unlike other animations the worklet animation's [=current time=] does
not directly determine the animation effect's [=local time=] (via its [=inherited time=]).
Instead the associated [=animator instance=] controls the animation effect's [=local time=]
directly. Note that this means that the [=timeline's=] current time does not fully determine the
animation's output.

[=Worklet animation=] has the following properties in addition to the {{Animation}} interface:
  - : <dfn>animation animator name</dfn>
    :: A string that identifies its [=animator definition=].
  - : <dfn>serialized options</dfn>
    :: A serializable options object that is used whe constructing a new animator instance.
  - : <dfn>corresponding animator instance</dfn>
    :: A [=Animator Instance=].


The existence of [=corresponding animator instance=] for a [=worklet animation=] depends on
the animation [=play state=]. See [[#web-animation-overrides]] for details on when and this
correspondence changes.

<xmp class='idl'>
[Exposed=Window]
interface WorkletAnimation : Animation {
        constructor(DOMString animatorName,
              optional (AnimationEffect or sequence<AnimationEffect>)? effects = null,
              optional AnimationTimeline? timeline,
              optional any options);
        readonly attribute DOMString animatorName;
};
</xmp>


<figure>
  <img src="img/WorkletAnimation-timing-model.svg" width="600"
    alt="Overview of the WorkletAnimation timing model.">
  <figcaption>
    Overview of the worklet animation timing model.
    <br>
    The animation current time is input to the animator instance, which produces a local time value
    for the animation effect. If the animator instance is running in a parallel global scope the
    implementation may also choose to use the local time value to produce the animation output and
    update the visuals in parallel.

  </figcaption>
</figure>


Creating a Worklet Animation {#creating-worklet-animation}
----------------------------------------------------------

<div algorithm="create-worklet-animation">
<dfn constructor for=WorkletAnimation>WorkletAnimation(|animatorName|, |effects|, |timeline|, |options|)</dfn>

Creates a new {{WorkletAnimation}} object using the following procedure:

    1. Let |documentAnimatorDefinitions| be the associated [=document's=] <a>document animator
        definitions</a> [=map=].

    2. If |documentAnimatorDefinitions|[|animatorName|] does not [=map/exists=], [=throw=] an
        [=TypeError=] and abort the following steps.

    3. If |documentAnimatorDefinitions|[|animatorName|] is <code>"invalid"</code>, [=throw=] an
        [=TypeError=] and abort the following steps.

    4. Let |workletAnimation| be a new {{WorkletAnimation}} object.

    5. Run the procedure to [=set the timeline of an animation=] on |workletAnimation| passing
        |timeline| as the new timeline or, if a |timeline| argument is not provided,
        passing the [=default document timeline=] of the {{Document}} associated with the
        {{Window}} that is the [=current global object=].

    6. Let |effect| be the result corresponding to the first matching condition from below.
         : If |effects| is a {{AnimationEffect}} object,
         :: Let effect be |effects|.
         : If |effects| is a [=list=] of {{AnimationEffect}}</a> objects,
         :: Let |effect| be a new {{WorkletGroupEffect}} with its children set to |effects|.
         : Otherwise,
         :: Let |effect| be undefined.

    7. Let |serializedOptions| be the result of [=StructuredSerialize=](|options|).
        Rethrow any exceptions.

    8. Set the [=serialized options=] of |workletAnimation| to |serializedOptions|.

    9. Set the [=animation animator name=] of |workletAnimation| to |animatorName|.

    10. Run the procedure to [=set the target effect of an animation=] on |workletAnimation|
        passing |effect| as the new effect. Note that this may trigger action to
        [=set animator instance of worklet animation=]. See [[#web-animation-overrides]] for more
        details.

</div>


Worklet Animation Timing and Sync Model {#timing-and-sync-model}
----------------------------------------------------------------

This section describes how [=worklet animation's=] timing model differs from other
[=animations=].

As described in [[#worklet-animation-desc]], the [=worklet animation's=] [=current time=] does
not determine its [=animation effect's=] [=local time=]. Instead the associated
[=animator instance=] controls the animation effect's [=local time=] directly. This means that the
animation effect's local time is controlled from a {{WorkletGlobalScope}} which may be in a parallel
execution context.

Here are a few implications of the above semantics:

 - Setting the [=current time=] or [=start time=] of a [=worklet animation=] does not
    necessarily change its output, but may change the animation [=play state=].
 - Similarly, invoking {{Animation/finish()}} or updating a [=worklet animation's=] <a>playback
    rate</a> does not necessarily change its output, but may change the animation [=play state=]
 - Querying the animation effect's local time using {{AnimationEffect/getComputedTiming()}}
    may return stale information, in the case where the [=animator instance=] is running in a
    parallel execution context.


If a Worklet Animation animation is executing in a parallel worklet execution context, the last
known state of its Animator Effects should be periodically synced back to the main javascript
execution context. The synchronization of [=effect values=] from the parallel worklet execution
context to the main javascript execution context <em>must</em> occur before
[=running the animation frame callbacks=] as part of the document lifecycle.

Note that due to the asynchronous nature of this animation model a script running in the main
javascript execution context may see a stale value when reading a [=target property=] that is
being animated by a Worklet Animation, compared to the value currently being used to produce the
visual frame that is visible to the user. This is similar to the effect of asynchronous scrolling
when reading scroll offsets in the main javascript execution context.


<div algorithm="sync-local-times">

To <dfn>sync local times to document</dfn> for a given |workletGlobalScope| the user agent
<em>must</em> perform the action that corresponds to the first matching condition from the
following:


 : If the |workletGlobalScope| is not running in a parallel execution context
 :: perform the following steps immediately:

 : If the |workletGlobalScope| is running in a parallel execution context
 ::  [=queue a task=] to run the following steps before <a>running the animation frame
     callbacks</a> as part of the document lifecycle:

  1. Iterate over all [=animator instance=]s in the animation worklet's global scope
     [=animator instance set=]. For each such |animator| perform the following steps:

        1. If |animator|'s [=sync requested flag=] is <b>false</b> skip the rest of the steps.

        2. Let |animatorEffect| be |animator|'s [=effect=].

        3. Let |effect| be |animatorEffect|'s [=corresponding effect=].

        4. Set |effect|'s local time to |animatorEffect|'s local time.

        5. Set |animator|'s [=sync requested flag=] to <b>false</b>.

</div>

<div algorithm="sync-animation-timings">

To <dfn>sync animation timings to worklet</dfn> for a given |workletAnimation| the user agent
<em>must</em> perform the following steps:

  1. If |workletAnimation| does not have a [=corresponding animator instance=], abort the
     following steps.

  2. Let |animator| be |workletAnimation|'s [=corresponding animator instance=].

  2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
     |workletAnimation|.

  3. : If the |workletGlobalScope| is not running in a parallel execution context
     :: perform the following steps immediately.

     : If the |workletGlobalScope| is running in a parallel execution context
     ::  [=queue a task=] to run the following steps:

        1. Set |animator|'s [=animator current time=] to |workletAnimation|'s [=current time=]

        2. Let |animatorEffect| be |animator|'s [=effect=].

        3. Let |effect| be |animatorEffect|'s [=corresponding effect=].

        4. Set the following properties on |animatorEffect| to be the same as |effect|:
             *    [=start delay=],
             *    [=end delay=],
             *    [=fill mode=],
             *    [=iteration start=],
             *    [=iteration count=],
             *    [=iteration duration=],
             *    [=playback direction=], and
             *    [=timing function=].


</div>


Note: Notice that the local time is <b>not</b> synced from the document to animation worklet.


Issue(811): Come with appropriate mechanism's for [=animator instance=] to get notified when its
   animation currentTime is changing e.g., via reverse(), finish() or playbackRate change. So that
   it can react appropriately.


Web Animations Overrides {#web-animation-overrides}
---------------------------------------------------

In addition to the existing conditions on when the [=animation=] is considered [=ready=], a
[=worklet animation=] is only considered [=ready=] when the following condition is also true:

  - the user agent has completed any setup required to create the [=worklet animation's=]
     [=corresponding animator instance=].

When a given worklet animation's [=play state=] changes from [=idle=] to [=finished=],
[=running=], or [=paused=], run the procedure to
[=associate animator instance of worklet animation=] given the worket animation as
|workletAnimation|.

When a given worklet animation's [=play state=] changes from [=finished=], [=running=] or
[=paused=] to [=idle=], run the procedure to
[=disassociate animator instance of worklet animation=]given the worklet animation as
|workletAnimation|.

When a given worklet animation's [=replace state=] changes from [=active=] to either
[=persisted=] or [=removed=] run the procedure to
[=disassociate animator instance of worklet animation]= given the worklet animation as
|workletAnimation|.


Issue: In web-animation play state is updated before the actual change in particular some operations
such as play() are asynchronous. We should really invoke these Animator related operation after the
appropriate animation operation is complete instead of when play state has changed. This will
require either finding (or introducing) q new hook in web animation or having override for each such
async operation.


When the procedure to [=set the target effect of an animation=] for a given worklet animation
is called, then [=set animator instance of worklet animation=] given the worklet animation as
|workletAnimation|.

When the procedure to [=set the timeline of an animation=] for a given |workletAnimation|
is called, then [=set animator instance of worklet animation=] given the worklet animation as
|workletAnimation|.

When the procedure to [=set the current time=] or [=set the start time=] for a given worklet
animation is called, then [=sync animation timings to worklet=] given the worklet animation as
|workletAnimation|.

When the procedure to [=update the timing properties of an animation effect=] for a given effect is
called and that effect is owned be a worklet animation, then
[=sync animation timings to worklet=] given that worklet animation as |workletAnimation|.


<div algorithm="associate-animator-instance">

To <dfn>associate animator instance of worklet animation</dfn> given |workletAnimation|,
the user agent <em>must</em> run the following steps:

  1. If |workletAnimation| has a [=corresponding animator instance=], abort the following steps.
  2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
    |workletAnimation|.
  3. [=Queue a task=] on |workletGlobalScope| to run the procedure to <a>create a new animator
       instance</a>, passing:
      * The |workletAnimation|'s [=animation animator name=] as name.
      * The |workletAnimation|'s [=timeline=] as timeline.
      * The |workletAnimation|'s [=animation effect=] as effect.
      * The |workletAnimation|'s [=serialized options=] as options.
      * The |workletGlobalScope| as workletGlobalScope.
  4. If the procedure was successful, set the resulting [=animator instance=] to be the
     [=corresponding animator instance=] of |workletAnimation|.

</div>

<div algorithm="disassociate-animator-instance">

To <dfn>disassociate animator instance of worklet animation</dfn> given
|workletAnimation|, the user age <em>must</em> run the following steps:

  1. If |workletAnimation| does not have a [=corresponding animator instance=], abort the
    following steps.
  2. Let |workletGlobalScope| be the {{AnimationWorkletGlobalScope}} associated with
    |workletAnimation|.
  3. Let |animatorInstance| be |workletAnimation|'s [=corresponding animator instance=].
  4. [=Queue a task=] on the |workletGlobalScope| to run the procedure to <a>remove an animator
     instance</a>, passing |animatorInstance| as instance and |workletGlobalScope| as
     workletGlobalScope.
  5. Set |workletAnimation|'s [=corresponding animator instance=] as undefined.

</div>

<div algorithm="set-animator-instance">

To <dfn>set animator instance of worklet animation</dfn> given
|workletAnimation|, the user agent <em>must</em> run the following steps:

  1. [=disassociate animator instance of worklet animation=] given |workletAnimation|.
  2. [=associate animator instance of worklet animation=] given |workletAnimation|.

</div>

Effect Stack and Composite Order {#effect-stack-composite-order}
----------------------------------------------------------------

As with other animations, [=worklet animations=] participate in the [=effect stack=].  A worklet
animation does not have a specific [=animation class=] which means it has the same composite order
as other Javascript created web animations.





Additional Related Concepts {#related-concepts}
===============================================


Worklet Group Effect {#worklet-group-effect}
--------------------------------------------
<em>This section is not normative.</em>


[=Group effect=] is a type of [=animation effect=] that enbales multiple child animation
effects to be animated together as a group.

{{WorkletGroupEffect}} is a type of [=group effect=] that allows its [=child effect's=]
[=local times=] to be mutated individually.

When a {{WorkletGroupEffect}} is set as the [=animation effect=] of a [=worklet animation=],
its [=corresponding animator instance=] can directly control the [=child effects=]' <a>local
times</a>. This allows a single worklet animation to coordinate multiple effects - see
[[#example-2]] for an example of such a use-case.

<xmp class='idl'>
[Exposed=AnimationWorklet]
interface WorkletGroupEffect {
  sequence<WorkletAnimationEffect> getChildren();
};
</xmp>


Issue(w3c/csswg-drafts#2071): The above interface exposes a conservative subset of GroupEffect
proposed as part of web-animation-2. We should instead move this into a delta spec against the
web-animation.


Note: Group Effect is currently an experimental feature and not well specified in web animations. So
the concept of {{WorkletGroupEffect}} may change dramatically as [=Group Effect=] get specified.
See https://github.com/yi-gu/group_effect/blob/master/README.md for more details.


ScrollTimeline {#scroll-timeline}
---------------------------------
<em>This section is not normative.</em>


{{ScrollTimeline}} is a new concept being proposed for addition to web animation API. It defines
an animation timeline whose time value depends on the scroll position of a scroll container.
[=Worklet animations=] can have a scroll timeline and thus drive their scripted effects based
on a scroll offset.

Note: <strong>Access to input</strong>: We are interested on exposing additional user input beside
scrolling (e.g., touch/pointer input) to these animations so that authors can create jank-free
input driven animations which are not really possible today. We are still trying to figure out the
right abstractions and mechanisms to do this.



Security Considerations {#security-considerations}
==================================================

There are no known security issues introduced by these features.

Privacy Considerations {#privacy-considerations}
================================================

There are no known privacy issues introduced by these features.

Examples {#examples}
====================


Example 1: Spring timing. {#example-1}
---------------------------------------
Here we use Animation Worklet to create animation with a custom spring timing.


<xmp class='lang-markup'>

<div id='target'></div>

<script>
await CSS.animationWorklet.addModule('spring-animator.js');
targetEl = document.getElementById('target');

const effect = new KeyframeEffect(
  targetEl,
  {transform: ['translateX(0)', 'translateX(50vw)']},
  {duration: 1000}
);
const animation = new WorkletAnimation('spring', effect, document.timeline, {k: 2, ratio: 0.7});
animation.play();
</script>

</xmp>


<xmp class='lang-javascript'>
registerAnimator('spring', class SpringAnimator {
  constructor(options = {k: 1, ratio: 0.5}) {
    this.timing = createSpring(options.k, options.ratio);
  }

  animate(currentTime, effect) {
    let delta = this.timing(currentTime);
    // scale this by target duration
    delta = delta * (effect.getTimings().duration / 2);
    effect.localTime = delta;
    // TODO: Provide a method for animate to mark animation as finished once
    // spring simulation is complete, e.g., this.finish()
    // See issue https://github.com/w3c/css-houdini-drafts/issues/808
  }
});

function createSpring(springConstant, ratio) {
  // Normalize mass and distance to 1 and assume a reasonable init velocit
  // but these can also become options to this animator.
  const velocity = 0.2;
  const mass = 1;
  const distance = 1;

  // Keep ratio < 1 to ensure it is under-damped.
  ratio = Math.min(ratio, 1 - 1e-5);

  const damping = ratio * 2.0 * Math.sqrt(springConstant);
  const w = Math.sqrt(4.0 * springConstant - damping * damping) / (2.0 * mass);
  const r = -(damping / 2.0);
  const c1 = distance;
  const c2 = (velocity - r * distance) / w;

  // return a value in [0..distance]
  return function springTiming(timeMs) {
    const time = timeMs / 1000; // in seconds
    const result = Math.pow(Math.E, r * time) *
                  (c1 * Math.cos(w * time) + c2 * Math.sin(w * time));
    return distance - result;
  }
}
</xmp>


Example 2: Twitter header. {#example-2}
---------------------------------------
An example of twitter profile header effect where two elements (avatar, and header) are updated in
sync with scroll offset with an additional feature where avatar can have additional physic based
movement based on the velocity and acceleration of the scrolling.


<xmp class='lang-markup'>
<div id='scrollingContainer'>
  <div id='header' style='height: 150px'></div>
  <div id='avatar'><img></div>
</div>

// In document scope.
<script>
const headerEl = document.getElementById('header');
const avatarEl = document.getElementById('avatar');
const scrollingContainerEl = document.getElementById('scrollingContainer');


const scrollTimeline  = new ScrollTimeline({
  scrollSource: scrollingContainerEl,
  orientation: 'block',
  timeRange: 1000,
  startScrollOffset: 0,
  endScrollOffset: headerEl.clientHeight
});

const effects = [
    /* avatar scales down as we scroll up */
    new KeyframeEffect(avatarEl,
                    {transform: ['scale(1)', 'scale(0.5)']},
                    {duration: scrollTimeline.timeRange}),
    /* header loses transparency as we scroll up */
    new KeyframeEffect(headerEl,
                    {opacity: [0, 0.8]},
                    {duration: scrollTimeline.timeRange})
];

await CSS.animationWorklet.addModule('twitter-header-animator.js');
const animation = new WorkletAnimation('twitter-header', effects, scrollTimeline);

animation.play();
</script>

</xmp>

<xmp class='lang-javascript'>
// Inside AnimationWorkletGlobalScope.
registerAnimator('twitter-header', class HeaderAnimator {
  constructor(options, state = {velocity: 0, acceleration: 0}) {
    // `state` is either undefined (first time) or it is the previous state (after an animator
    // is migrated between global scopes).
    this.velocity = state.velocity;
    this.acceleration = state.acceleration;
  }


  animate(currentTime, effect) {
    const scroll = currentTime;  // scroll is in [0, 1000] range

    if (this.prevScroll) {
      this.velocity = scroll - this.prevScroll;
      this.acceleration = this.velocity - this.prevVelocity;
    }
    this.prevScroll = scroll;
    this.prevVelocity = velocity;


    // Drive the output group effect by setting its children local times individually.
    effect.children[0].localTime = scroll;

    effect.children[1].localTime = curve(velocity, acceleration, scroll);
  }

  state() {
    // Invoked before any migration attempts. The returned object must be structure clonable
    // and will be passed to constructor to help animator restore its state after migration to the
    // new scope.
    return {
      this.velocity,
      this.acceleration
    }
  }

});

curve(scroll, velocity, acceleration) {

 return /* compute an return a physical movement curve based on scroll position, and per frame
           velocity and acceleration. */ ;
}

</xmp>

Example 3: Parallax backgrounds. {#example-3}
---------------------------------------------
A simple parallax background example.

<xmp class='lang-markup'>
<style>
.parallax {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
}
</style>
<div id='scrollingContainer'>
  <div id="slow" class="parallax"></div>
  <div id="fast" class="parallax"></div>
</div>

<script>
await CSS.animationWorklet.addModule('parallax-animator.js');

const parallaxSlowEl = document.getElementById('slow');
const parallaxFastEl = document.getElementById('fast');
const scrollingContainerEl = document.getElementById('scrollingContainer');

const scrollTimeline = new ScrollTimeline({
  scrollSource: scrollingContainerEl,
  orientation: 'block',
  timeRange: 1000
});
const scrollRange = scrollingContainerEl.scrollHeight - scrollingContainerEl.clientHeight;

const slowParallax = new WorkletAnimation(
    'parallax',
    new KeyframeEffect(parallaxSlowEl,
        {'transform': ['translateY(0)', 'translateY(' + -scrollRange + 'px)']},
        {duration: scrollTimeline.timeRange}),
    scrollTimeline,
    {rate : 0.4}
);
slowParallax.play();

const fastParallax = new WorkletAnimation(
    'parallax',
    new KeyframeEffect(parallaxFastEl,
        {'transform': ['translateY(0)', 'translateY(' + -scrollRange + 'px)']},
        {duration: scrollTimeline.timeRange}),
    scrollTimeline,
    {rate : 0.8}
);
fastParallax.play();
</script>

</xmp>

<xmp class='lang-javascript'>
// Inside AnimationWorkletGlobalScope.
registerAnimator('parallax', class ParallaxAnimator {
  constructor(options) {
    this.rate_ = options.rate;
  }

  animate(currentTime, effect) {
    effect.localTime = currentTime * this.rate_;
  }
});
</xmp>
