Getting started with Web Animations Polyfill

[blairwilcox]

An updated article on how to use Web Animations would be really helpful. I tried to get started using this article from the v0.5 docs, but it makes reference to things like Animation objects which don't seem to be supported.

[ebidel]

@samthor any interest in helping us updating the guide?

[arthurevans]

Are you including the web animations polyfill directly? It's no longer included with the Polymer library.

It is included with the neon elements, so one option is to use that API:

https://elements.polymer-project.org/guides/using-neon-animations

If you want to use the polyfill directly, there is some information in the polyfill repo:

https://github.com/web-animations/web-animations-next

[blairwilcox]

Hi @arthurevans. I was trying to include the web animations polyfill directly The page only says to include web-animations-next.js. My main issue with the documentation is that most of its examples involve using an Animation() object. However, when I try to do it this way, I get the error "Cannot read property 'cancel' of null'. I posted an issue in the web-animations repository and was told that the correct way to do it was to just use Element.animate().

[samthor]

@ebidel I'll take this, and update the guide included with 0.5. It's mostly naming changes since that was written.

@recanti for now, check out this codelab I wrote for Google I/O 2015-
http://io2015codelabs.appspot.com/codelabs/web-animations-transitions-playbackcontrol

There's also the web-animations-codelabs repo, but it just contains the single same codelab for now.

[blairwilcox]

Thanks @samthor. The codelab helped clear up a lot of things.