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

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.

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

While the behavior looks good under certain requirements (namely that an
'ease' timing function is used), it works mainly because the offset timing
functions smooth out a set of linear segments. Try replacing 'ease' with
'linear' in the linked fiddle to see this directly.

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.

Cheers,
    -Shane

* Note that this example uses an older version of the Web Animations API.
We haven't updated the polyfill to the new version yet, but this behavior
is still expressible in the new syntax as:
  start keyframe {
    additive: sum;
    prop: <previous value> - <current value>;
  }
  end keyframe {
    additive: sum;
    prop: 0;
  }

On Tue, Jun 11, 2013 at 11:30 AM, Brian Birtles <bbirtles@mozilla.com>wrote:

> Hi Kevin,
>
> Thanks for following up here. I didn't see your response on the blog until
> now. I've replied there but it's probably best to continue the discussion
> here.
>
>
> Kevin Doughty wrote:
>
>> I have been posting to css-style for a recommendation of a particular
>> type of additive transition. Please forgive the cross-post, but Brian
>> Birtles commented at my website http://kxdx.org/seamless-css-**
>> transitions/ <http://kxdx.org/seamless-css-transitions/> and I would
>> like to address it here. I have been calling this type of animation
>> "seamless". It is for implicit, transition-style animations, when the
>> underlying value of a property is changed. I cannot stress enough how
>> appropriate this usage pattern is for animating layout changes, in
>> particular when responding to user events. It produces animations that
>> seamlessly blend together and produce beautiful curves instead of jarring
>> presentation value animations.
>>
>
> If I've understood the use case correctly, the arrangement is something
> like the following:
>
>   start keyframe {
>     additive: replace;
>     prop: <previous value>;
>   }
>   end keyframe {
>     additive: sum;
>     prop: 0;
>   }
>
> Independent animations are then combined using a stack where the additive
> operators are used to determine how they combine.
>
> Does this match your use case?
>
> If so, it is possible with Web Animations. The main difficulty would be
> specifying the previous value declaratively.
>
> It seems like, in effect, this is equivalent to simply using to-animations
> with a forwards fill and not updating the underlying style. However, I can
> see it has the advantage of providing better non-animated fallback and of
> affecting the specified style (which may be useful when style is used to
> track state).
>
> Best regards,
>
> Brian
>
>