Intent to implement: ScrollTimeline

[Botond Ballo]

Summary:
Scroll-linked animations are a way for web developers to write
web animations whose progress is linked to scrolling rather than
to time.
ScrollTimeline is the JS API for creating scroll-linked animations
(the spec also contains a CSS API, which will be implemented at
a later time).

Bug:
Tracking bug for scroll-linked animations: bug 1281348 [1]
Tracking bug for the initial landing of ScrollTimeline: bug 1321428 [2]

Link to standard:
https://wicg.github.io/scroll-animations/

This spec is fairly unstable for the time being, and is likely to
undergo significant changes before final standardization.
However, I believe the core mechanism that I'm proposing to
implement here is reasonably stable, and web developers will
benefit from having it in a Firefox build so they can play around
with it.

Platform coverage: where will this be available?
All platforms.

Estimated or target release:
Not known yet. Probably not very soon as the spec still needs
to stabilize.

Preference behind which this will be implemented:
dom.animations-api.scroll-driven.enabled

Due to the early stage of standardization of this feature, it will
initially only be available on Nightly _and_ behind a pref (that is,
you need to be running Nightly and have the pref flipped to
use it).

Is this feature enabled by default in sandboxed iframes?
Yes

If allowed, does it preserve the current invariants in terms of what
sandboxed iframes can do?
I believe so, but I'm not an authority on sandboxing.

DevTools bug:
Bug 1350461

Do other browser engines implement this?
Safari has originally proposed the CSS properties that this spec
is based on [4], though I'm not aware of recent activity relating
to it.

Blink has a very similar proposal [5] which we expect will be
consolidated into the WICG spec linked above.

Tests
Currently just layout/reftests/async-scrolling/animation.
Bug 1324605 tracks writing web platform tests.

Cheers,
Botond

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1281348
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1321428
[3] https://bugzilla.mozilla.org/show_bug.cgi?id=1350461
[4] https://lists.w3.org/Archives/Public/www-style/2014Sep/0135.html
[5] https://github.com/drufball/generalized-animations
[6] https://bugzilla.mozilla.org/show_bug.cgi?id=1324605

[Zibi Braniecki]

Is it possible to use this, or is there a similar proposal, for linking animation timeline to other user-controlled means of interacting with the UI?

I'm thinking primarily about things like:

- drag&drop - the percentage of the distance between the source and target linked to the animation timeline
- touch events - unfold or move an element with a thumb on mobile triggers an animation linked to the percentage of the distance between folded/unfolded.

Thanks,
zb.

[Botond Ballo]

Web Animations was designed with the possibility of extending it with
other types of timelines in mind.

ScrollTimeline is one such extension, a timeline linked to scrolling.

What you describe sounds like other types of timelines, linked to user
gestures. There is mention of that on the wiki [1] [2], but no
concrete proposal that I'm aware of. I would imagine contributions to
the development of such a proposal would be welcome!

Cheers,
Botond

[1] https://wiki.mozilla.org/Platform/Layout/Extended_Timelines#Touch-based_scrubbing
[2] https://wiki.mozilla.org/Platform/Layout/Extended_Timelines#Other_timelines

[zbran...@mozilla.com]

On Saturday, March 25, 2017 at 8:02:36 PM UTC+1, Botond Ballo wrote:

> What you describe sounds like other types of timelines, linked to user
> gestures. There is mention of that on the wiki [1] [2], but no
> concrete proposal that I'm aware of. I would imagine contributions to
> the development of such a proposal would be welcome!

Thanks!

Yeah, it seems that the touch-based scrubbing is the closest to what I thought of. It's not my idea, of course. I just really like the UX of the material design from Google where the animation is linked to the progress of some touch event.

It's not only pleasant to look at and play with, but it also lowers the cognitive confusion factor, since the visual stimuli is directly linked, by both trigger and progress, user action, instead of "happening on its own".
Lastly, it works really well as tutorial since user can slow down, or pause in the middle of the action and the animation slows down, or pauses, in response. User can even reverse the motion and the animation will follow.
This all in my, naitve, UX stufy on a few of my less technically gifted friends, did wonders to their ability to gain sense of comfort in understanding the UX paradigms of the software.

I'd love to see the Web gain this capability, and of course, to see Firefox UI use that.

zb.