User:Mantaroh/Scroll-driven animations

** Note : This Document is WIP(Doesn't translate yet.) **

Scroll-driven animations.

For previous discussion, see Extended Timeline.

Introduction

Dean proposed the features of animation-trigger / animation-timebases / animation-behavior.
And, Brian/Botond proposed the Extended Timeline.
These ideas is similar to each idea. Especially, We can create common architect which we can use at CSS Animations and Web Animation. Because these common idea is that we map the scroll value and timeline's value.

また、Firefox 49 から有効になった Bug 1178662「wrietable timeline」のバグで、タイムラインの設定 / 構築が容易に行えるようになったことから ScrollTimeline のようにスクロール量とマッピングされたタイムラインを作成することが可能になりました。

そのため、このドキュメントでは Web Animation / CSS Animation を考慮したスクロールベースのアニメーションについて記述しています。

Interface of script proposal

Same as DocumentTimeline, we should set ScrollTimeline to timeline property of animation.
Perhaps, WebIDL of ScrollTimeline is same to previous API proposal.

[Constructor ((Window or Element) scrollSource, Orientation orientation, optional DOMString maxTime)
interface ScrollTimeline : AnimationTimeline {
  attribute Orientation orientation;
  attribute DOMString maxTime;
};

// Is there an existing enum somewhere we can use for this?
enum Orientation { "vertical", "horizontal" };

コンストラクタの第3引数の maxTime は、アニメーションの繰り返し回数が無限(Infinte)の為に使用します。 この引数を指定しない場合は、以下の計算により自動で設定されます。

- もし ScrollTimeline に関連する Aniamtion が存在しない場合は 0ms
- Animation が存在する場合、target effect end
 - 値が Inifinity の場合、関連する Animation で一番大きな target effect end とする。
 - 関連するすべての Animation の target effect end が Infinity の場合、
   

Usage of this API

1) Duration of animation is finite.

 var scrollTimeline = new ScrollTimeline(div, "vertical");
 var animation1 = new Animation(new KeyframeEffect( { marginLeft: ['0px', '200px'] }, 10000), null);
 var animation2 = new Animation(new KeyframeEffect( { marginLeft: ['100px', '300px'] }, 20000), null);
 animation1.timeline = scrollTimeline;
 animation2.timeline = scrollTimeline;

Demonstration:
 http://output.jsbin.com/wiwode

2) Duration of animation is infinite.

 var scrollTimeline = new ScrollTimeline(div, "horizontal", "20s");  // scroll range is mapped 0s - 20s.
 var animation1 = new Animation(new KeyframeEffect( { marginLeft: ['0px', '200px'] }, 10 * 1000), null);
 var animation2 = new Animation(new KeyframeEffect( { marginLeft: ['100px', '300px'] }, {duration:20 * 1000, iterations:Infinity}), null);
 animation1.timeline = scrollTimeline;
 animation2.timeline = scrollTimeline;

Problem of implementation.

1) The concept of time value
We managed time value in Timeline, However ScrollTimeline doesn't have the concept of time. Because start position of ScrollTimeline is corresponding the start of animation. So ScrollTimeline doesn't have timve value but have relative position of animation. In order to implement these, ScrollTimeline should have the start time of animation.

2) Supporting multi ScrollTimeline
The animation have same timeline object each other.

3) End delay
ScrollTimeline has limited range. i.e. timeline is finite range.