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 are similar to each idea. Especially, an amount of animation changes related to a number of scroll changes. We can create architect which using this common idea.

Script API 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 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 for infinite animation iterations.
And update the range of ScrollTimeline based on the first matching conditions:
- If ScrollTimeline doesn't have any related animation, maxRange should be 0ms.
- If ScrollTimeline has related animation, maxRange should be a maximum value of target effect end time of animations.
(If target effect end time is infinite, presumably we might use dose duration of animation.)

Examples

 // example: we have two finite animations.
 var scrollTimeline = new ScrollTimeline(scrollElem, "vertical");
 var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, 1000);
 var anim1 = new Animation(keyframe1, scrollTimeline);
 var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, 4000);
 var anim2 = new Animation(keyframe2, scrollTimeline);

 Then we should use 4000 ms as max scroll range.

 // example: we have three animations.
 target1.style.animation = "animation1 50s linear Infinity";
 target2.style.animation = "animation2 100s linear Infinity";
 target3.style.animation = "animation3 70s linear 10s";

 var anim1 = target1.getAnimations()[0];
 var anim2 = target1.getAnimations()[0];
 var anim3 = target1.getAnimations()[0];

 var scrollTimeline = new ScrollTimeline(scrollElem, "horizontal");
 anim1.timeline = timeline;
 anim2.timeline = timeline;
 anim3.timeline = timeline;

 Then we should use 100s as max scroll range.

 // example: we have two animation which having infinite iterations.
 var scrollTimeline = new ScrollTimeline(scrollElem, "vertical");
 var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinity});
 var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinity});

 var anim1 = new Animation(keyframe1, scrollTimeline);
 var anim2 = new Animation(keyframe2, scrollTimeline);

 Then we should use 3000 ms as max scroll range.

 // example: we have two infinite animations and specified scroll range.
 var scrollTimeline = new ScrollTimeline(scrollElem, "vertical", 2000);
 var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinity};
 var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinity};

 var anim1 = new Animation(keyframe1, scrollTimeline);
 var anim2 = new Animation(keyframe2, scrollTimeline);

 Then we should use 2000 ms as max scroll range.

CSS Interface proposal

The CSS interface is same to Dean's proposal. There is three feature in his proposal, but 'animation-behavior' is not related to timeline. So in this document, we explain 'animation-timeline'(Original name is 'animation-timebase') and 'animation-trigger' interface only.

Common features:

- The scroll container should notify the changes value of scroll to related ScrollTimeline.
- The difference point is that animation target element and scroll container object is same or subelement.
- If the direction of scroll is reverse(like from bottom to top, from right to left), the timeline time is decreasing.
- ScrollTimeline should remain the animation status in order to use fill mode. 

Demonstration

 http://output.jsbin.com/wiwode

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
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.