Re: [web-anim] "Seamless" additive animation

On Jun 11, 2013, at 1:44 AM, Shane Stephens <shans@google.com> wrote:

> 
> Hi Kevin,
> 
> I've played around with this a bit. The good news is that it's relatively easy to achieve the behavior you've specified using Web Animations (see for example http://jsfiddle.net/WRWVD/3/*). Essentially, this does exactly what you describe: it moves the animated object to its final position then creates an additive animation from (old - new) to 0.

That is wonderful news! I have updated the jsfiddle to show the correct timing function using a cubic bezier of .5, 0, .5, 1.
http://jsfiddle.net/WRWVD/4/
Safari Version 6.0.5 (8536.30.1) for OSX 10.8.4 shows a pretty heinous flicker which looks like this Core Animation bug:
rdar://problem/12081774
which I believe is the cause of this similar WebKit bug:
https://bugs.webkit.org/show_bug.cgi?id=115278

> Unfortunately, I don't think this belongs directly in a declarative specification such as CSS. 

Apple's view animation API does not allow for this type of animation because it requires implicit Core Animation, at least not without a hack of a framework that I wrote. CSS Transitions don't allow for this type of animation either, and it is a shame since it is so very easy to accomplish.

> I think if we want this feature, we'd be better to provide a primitive that actually generates smooth paths, and allow timing functions to influence the rate of movement of the object along the generated path.

You couldn't possibly be suggesting creating keyframes that produce this kind of path, are you? Eventually your users will expect animation of grids or editable text, for example like in this video:
http://www.youtube.com/watch?v=u1RStgv0_CU
What would happen on user initiated resize of a window as you try to calculate the paths for these keyframe animations? Good luck with that.