[csswg-drafts] [web-animations-1] Generalized Time Values and Timelines

majido has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] Generalized Time Values and Timelines ==
## tl;dr

Generalize the time value in web animation to be a dictionary instead of a scalar real number. This allows us to have rich user inputs such as touch and scroll to be timelines and drive animations enabling sophisticated interactive effects.

## Background

In Web Animations, the input to animation model is a [time value](https://drafts.csswg.org/web-animations/#time-value-section) which is a single real number that nominally represents a number of milliseconds from some moment. AnimationTimeline is the source of the time value and there is a hierarchy of timing nodes (e.g.,  animation, effect) through which the value cascades down and is potentially transformed before reaching the actual animation effect.

[ScrollTimeline](https://wicg.github.io/scroll-animations/) is a proposal that extends this model by mapping a single scroll axis to time enabling a certain kinds of scroll-linked animations. This is a great direction but we feel it does not go far enough. In particular, the web animation timing model has a fundamental limitation that the effect input has to be modeled by a single dimensional variable. This makes it impossible (or very awkward) to use when the input is inherently multi-dimensional which is the case for many interesting input types.

Here are a few example scenarios where a single dimensional timeline is not sufficient: 

* Some shortcomings of current single dimensional ScrollTimeline proposal:
    * Effects that depend on multiple scroll axes.
    * Effects that want to differentiate between momentum vs non-momentum scrolling.
    * Effects that need to animate based on both scroll and time dimensions e.g., hidey-bar.
* Effects that depend on state and location of multiple touch pointers: 
     * Effects that need to react to addition or removal of a pointer.
     * Multi-touch direct manipulation effects that depend on knowing the position of all pointers.
* Interactive gesture effects:
     * Drag and drop and swipe effects that use a single pointer but depend on movement in two axes or the pointer velocity.
    * Rotation and scaling effects that depend on multiple pointers.


These effects are currently impossible to do using web animation model. This forces developers to implement them using `requestAnimationFrame`.

While AnimationWorklet helps enable fast script driven effects but without a rich multi-dimensional timeline input, it has limited applicability to such usecases. We think combined with a rich multi-dimensional timing model, it can replace many of the rAF based usecases.

## Proposal
Allow time value to be a map instead of (or in addition to) a scalar real number. Current timelines with single scalar value are simply a special case of this more generic model.

```webidl
typedef (double or DOMString or record<DOMString, TimeValue>) TimeValue;

interface AnimationTimeline {  
   readonly attribute TimeValue? currentTime;
};
```

### Key Properties

* Time value shape can change, for example a PointerTimeline can produce an empty map, a map with single entry when a single pointer is active, or one with two or more entries when more pointers are active.
* Non-integral values can be part of the time value map. For example, ScrollTimeline can include a ‘phase’ enum.
* We can introduce new types of timing nodes which allow grouping or filtering of time values. For example:
   * A UnionTimeline can union the output of a ScrollTimeline and DocumentTimeline to enable effects that depend on both scroll and time. 
   * A FilterTimeline that takes in PointerTimeline and returns only the “primary” pointer to be consumed with existing single dimensional effects.

## Detailed Proposal

This [document](https://docs.google.com/document/d/1-APjTs9fn4-E7pFeFSfiWV8tYitO84VpmKuNpE-25Qk/edit?usp=sharing) has more details on how this can be incorporated in the current specification, provides examples, discusses backward compatibility and some initial ideas on potential new timelines and group effects that this proposal enables. 

We aim for this to be a starting point of a discussion to evaluate the merit of this idea and how best
to enable rich interactive effects as part of web animation model.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2493 using your GitHub account

Received on Monday, 2 April 2018 16:58:47 UTC