User:Mantaroh/Scroll-driven animations

This Document is WIP

Scroll-driven animations.

For previous discussion, see Extended Timeline.

Background

We shipped wrietable timeline (bug 1178662) on Firefox 49, then we can set the new timeline instead of default document timeline. And we can extend AnimationTimeline.

e.g.

var timeline = new DocumentTimeline(10); // origin time is 10 ms. (Origin time spec)
var animation = new Animation(new KeyframeEffect(div, { marginLeft: ['0px', '200px'] }, 10000), null);
animation.timeline = timeline;

After landed this feature, we can implement ScrollTimeline/MediaTimeline..etc.

Interface proposal

Same as ScrollTimeline, 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)
interface ScrollTimeline : AnimationTimeline {
  attribute Orientation orientation;
};

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

Usage of this API

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

Demonstration:
Here : http://bit.ly/28Mpw55

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.