View source for User:Mantaroh/Scroll-driven animations

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

== Scroll-driven animations. ==
For previous discussion, see [[Platform/Layout/Extended Timelines|Extended Timeline]].

=== Introduction ===
Dean proposed [https://lists.w3.org/Archives/Public/www-style/2014Sep/0135.html the features of animation-trigger / animation-timebases / animation-behavior].<br/>
And, Brian/Botond proposed the [[Platform/Layout/Extended Timelines|Extended Timeline]].<br/>
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.<br/>
Perhaps, WebIDL of ScrollTimeline is same to [[Platform/Layout/Extended|previous API proposal]].

 [Constructor ((Window or Element) scrollSource, Orientation orientation, optional double maxTime)
 interface ScrollTimeline : AnimationTimeline {
   attribute Orientation orientation;
   attribute double maxTime;
 };
 
 // Is there an existing enum somewhere we can use for this?
 enum Orientation { "vertical", "horizontal" };

We will specify the third parameter when iterations of animation is 'Infinite'.
And update the range of ScrollTimeline based on the first maching conditions:
 - If ScrollTimeline doesn't have any related animation, maxRange should be 0ms.
 - If ScrollTimeline has related animation, maxRnage should be max value in animations. 
   (We should ignore the infinity duration.)
 - If all of related animation's duration is infinity, maxRange should be max value in animation's duration.<br />
   e.g. we have two animations.
    target1.animation = "anim1 10s linear infinite";
    target2.animation = "anim2 20s linear infinite";<br />
   Then we should be max value of ScrollTimeline is 20s.

=== Interface of CSS proposal ===

The CSS interface is same to [https://lists.w3.org/Archives/Public/www-style/2014Sep/0135.html Dean's proposal].
There are three feature in his poroposal, but 'animation-behavior' is not related with timeline.
So in this document, we explain 'animation-timebase' and 'animation-trigger' interface only.

animation-trigger:
 - The scroll container should notify the scroll value to the ScrollTimeline.
 - The difference point is that animation target element and scroll container object is same.

animation-timebase:
 - The feature is same to ScrollTimeline.
 - The difference point is that animation target element and scroll container object is same.


[Memo]
 - 通知するスクロール量の取得元の役割を明記する。

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

== Design ==

== Implement overview ==
 We need to implement several features as follow.
  - Notify the scroll value to ScrollTimeline from scroll containers.
  - ScrollTimeline should implement AnimationTimeline interface and RefreshObserver interface.
  - ScrollTimeline need to remain the scroll value which notified from scroll container.
  - ScrollTimeline need to override AnimationTimeline::GetCurrentTime in order to notify current progress of aninmation to own animations.


[Memo]
 - e10s の時どうする? 
  -> window から通知されるスクロール量をコンテンツ側の ScrollTimeline へ通知する必要がある

== Problem of implementation. ==
1) The concept of time value<br/>
We managed [https://w3c.github.io/web-animations/#time-value| 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<br/>
The animation have same timeline object each other.

3) End delay<br/>
ScrollTimeline has limited range. i.e. timeline is finite range.