Re: Request for Comments: Proposal for Touch-Based Animation Scrubbing

[Apologies for not replying to the thread directly - I only keep about 6 months of email from www-style]

In November last year, Tab proposed a way of linking scroll position to animation timeline (although the subject of the message is “Touch-based animation scrubbing”):

http://lists.w3.org/Archives/Public/www-style/2012Nov/0496.html

At the time I was fairly negative on the proposal. We (well, mostly Simon and others at Apple) were in the middle of a large effort to improve scrolling performance in Safari, and anything that might impact such performance was a huge pain. Mostly these were pages that either implemented their own scrolling or listened and reacted to every scroll event.

It’s about a year later and Tab was right: the genie is not going back into the bottle. Also, we have a Web Animations spec that is more fleshed out. Can we pick this discussion up again?

I think it would be nice to see if we could come up with something that addresses many of the most common features with minimal additions to CSS, and then something that allows script hooks for more complicated things. For example, Tab proposed an "animation-timeline" property, which would allow CSS to use something other than the wall clock for a timeline. Now we’d just need some way to map scroll offset to the timeline (possibly with min/max bounds and some multiplier for offset (called "timeline-length" in Tab’s proposal)).

That itself could be enough for the types of effects where, as you approach the end of an article, a link to related things flies in from the side of the page. Or having the background color of an element animate as you scroll. I’m not sure how to address the case of flipbook animations (many images that are swapped as you scroll - the pitchfork articles are a good example).

Then there is the case where you want "really fancy shit" (official term) to happen as you scroll. I always like doing things in declarative form if possible, so it would be nice if you could describe as many parameters to the animation as possible in CSS, and just call script with a progress parameter.

Lastly, something not addressed in Tab’s proposal was the ability to animate scrolling (i.e. the other way around). Many pages are calling scrollTo in a loop. It would be nice if there was some API where the browser would take care of the scrolling animation, given input of duration and easing.

Dean

Received on Saturday, 21 September 2013 21:58:22 UTC