Custom duration/delay

[mirceapiturca]

In order to create choreograph interactions, the used should be able to specify custom delays and durations associated to the respective animation.

Currently there is no way of doing that, All delays and duration are specified globally in CoreStyle.g.transitions

A nice way of doing that would be declarative:

  <section id="first">
    <div scale-up scale-up-delay=".5s">I should have a delay of .5s</div>
    <div scale-up scale-up-delay="1s">I should have a delay of 1s</div>
  </section>

  <section id="second" layout horizontal>
    ...
  </section>

Thank you.

[morethanreal]

This is in early stages and there are bugs, but there's some code in the next branch that supports using attributes like delay and duration on the animated element. It also depends on the web-animations-next branch in Polymer/core-animation and web-animations/web-animations-next.

[mirceapiturca]

Looks like you are switching from CSS transitions to native/js animations. This can be really good, allowing much more flexibility and control then CSS transitions.
Wondering if the web animations polyfill will work decent on mobile devices. When can we expect for this to go live?

[mirceapiturca]

Tested the new core-animated-pages that uses web-animations-next. The animation is jittery and duration seems longer. Even if element.animate is natively available I am getting a javascript animation. Is this a bug/issue in web-animations-next?

[morethanreal]

I think the polyfill is supposed to use Element.animate when it's available natively, but it doesn't do that right now. @dstockwell @alancutter

I'll likely keep this work in the branch until some bugs are resolved with the web animations polyfill. In particular, there's some issues with the finish event and timing functions.

[mirceapiturca]

I've created a test using the web-animations-next polyfill running on Chrome 37, with native support. Unfortunately the polyfill is not using the native element.animate and is doing a Javascript animation. Probably this is why the animation is jittery. Also not sure but both JS and native animation may run in parallel and this can cause the performance issues.

See the test here:
http://typefolly.com/polymer/components/web-animations-next/web-animations-next-test.html

I think that this should be submitted as a bug in web-animations-next.
Got any test cases with the finish and timing functions, maybe I can be of some help?

Thanks