Confirmed users
166
edits
Platform/Layout/Extended Timelines: Difference between revisions
Jump to navigation
Jump to search
m
→API
(Created page with "'''Summary:''' Following is a rough sketch of how the Web Animations API could be adapted to support scrubbing animations based on scroll position and (less critical) touch ev...") |
m (→API) |
||
| Line 15: | Line 15: | ||
The <code>currentTime</code> of a <code>ScrollTimeline</code> would be basically scrollTop/scrollY or scrollLeft/scrollX (with the exception that it would track smooth scrolling even though this isn't reported to the DOM, see {{bug|1010538}}). We could probably add scaling parameters here too, possibly based on scrollHeight/scrollMaxY etc. | The <code>currentTime</code> of a <code>ScrollTimeline</code> would be basically scrollTop/scrollY or scrollLeft/scrollX (with the exception that it would track smooth scrolling even though this isn't reported to the DOM, see {{bug|1010538}}). We could probably add scaling parameters here too, possibly based on scrollHeight/scrollMaxY etc. | ||
The <code>playbackRate</code> of an <code>AnimationPlayer</code> provides the mapping from scroll units to time units. We could extend this member to take an "auto" value like so: | The <code>playbackRate</code> of an <code>AnimationPlayer</code> provides the mapping from scroll units to time units. | ||
<div style="opacity:0.6"> | |||
(We probably don't need this feature for now) | |||
We could extend this member to take an "auto" value like so: | |||
interface AnimationPlayer : EventTarget { | interface AnimationPlayer : EventTarget { | ||
| Line 28: | Line 32: | ||
(We'd probably need a way of fetching the calculated value of playbackRate too. Not sure yet how best to represent this yet.) | (We'd probably need a way of fetching the calculated value of playbackRate too. Not sure yet how best to represent this yet.) | ||
</div> | |||
=== Example usage === | === Example usage === | ||
| Line 34: | Line 39: | ||
var timeline = new ScrollTimeline(div, "vertical"); | var timeline = new ScrollTimeline(div, "vertical"); | ||
timeline.play(new Animation(character, { transform: "rotate(180deg)" }, 100)); | timeline.play(new Animation(character, { transform: "rotate(180deg)" }, 100)); | ||
Note that this current approach doesn't require a subclass of AnimationPlayer like I thought it might. | Note that this current approach doesn't require a subclass of AnimationPlayer like I thought it might. | ||
Also note that by using a regular player you can have several animations tracking the same scroll container and then call <code>pause()</code>, <code>reverse()</code>, <code>finish()</code>, and update <code>playbackRate</code> etc. to take them out of the flow or change the way they track the scroll position. Setting <code>startTime</code> or adjusting the animation's delay can also allow offsetting them. | Also note that by using a regular player you can have several animations tracking the same scroll container and then call <code>pause()</code>, <code>reverse()</code>, <code>finish()</code>, and update <code>playbackRate</code> etc. to take them out of the flow or change the way they track the scroll position. Setting <code>startTime</code> or adjusting the animation's delay can also allow offsetting them. | ||
<div style="opacity:0.6">(Regarding the "auto" playbackRate behavior, the main problem is the '100' passed as the animation's duration would become completely arbitary. However, it's necessary since the default duration of an animation is zero so no matter what we set the <code>playbackRate</code> to we're not going to get meaningful times for running the animation.)</div> | |||
== Implementation issues == | == Implementation issues == | ||