"TypeError: b.animate is not a function" after 2.2.0

[ellenaua]

TypeError: b.animate is not a function.
(In 'b.animate({opacity:["1","0"]},{duration:1,fill:"forwards"})', 'b.animate' is undefined)

This error appears only in Safari (on iPhone and on Mac in Safari 8.0). In Chrome everything is OK.

[mbergeron]

I do get the same error in Safari

[alancutter]

Haven't been able to repro this error so far in Safari 9 on iOS/Mac 10.9.

[naoak]

I got the same error on Android 5.0.2 (XperiaZ3) stock browser.

[Edited]
If I wrap the following code in web-animations-bonus-object-form-keyframes.js with a try catch block,

  var element = document.documentElement;
  var animation = element.animate({'opacity': ['1', '0']},
      {duration: 1, fill: 'forwards'});
  animation.finish();
  var animated = getComputedStyle(element).getPropertyValue('opacity') == '0';
  animation.cancel();
  if (animated) {
    return;
  }

the error has gone. And works properly.

[naoak]

My issue seems to be dups of #72.

[alancutter]

Haven't gotten my hands on a copy of Safari 8 to repro this yet.
Could you please check if the issue persists in 2.2.1?

[mford516]

I am receiving this error on Safari 9.0.1, Firefox 46, and Microsoft Edge 20.10240.16384.0 as well.

Begins onload with:
"TypeError: b.animate is not a function. (In 'b.animate({opacity:["1","0"]},{duration:1,fill:"forwards"})', 'b.animate' is undefined)"

Then follows with:
"ReferenceError: Can't find variable: KeyframeEffect" when interacting with elements that utilize animations (in my case a paper-dropdown-menu).

Interestingly enough Firefox Developer Edition (48.0a2) does not throw this error. In 47.x of Dev Edition the error would occur.

As stated by others, Chrome does not have this issue.

[dstoc]

@mford516 could you provide an example page that shows those errors?

[alancutter]

@mford516 Also could you clarify whether you're using version 2.2.1 of the Web Animations polyfill?

[ebidel]

Both https://events.google.com/io2016/ and chromestatus.com have been updated to use 2.2.1 and I don't see errors in Safari 9.1 and FF 49.0a1.

[mford516]

@alancutter I was running 2.2.0, but just updated to 2.2.1 and still receive the error in Safari 9 (also updated from 9.0.1 to 9.1).

@dstockwell My current implementation is rather complicated. I can try to work on getting a jsBin set up to reproduce the issue.

In the meantime, here is some background. I'm using Polymer within an Angular 2 web application, therefore invoking the shadow dom. Also, in order to get the polyfills to work properly I'm loading webcomponents.js rather than webcomponents-lite.js. Could this be the issue? I understand that shadow dom is yet to be fully supported by browsers other than Chrome, but as far as I can see from the webcomponents.js compatibility matrix this should work fine across all major browsers.

Perhaps this has to do with my implementation of Polymer, I only arrived here after @dstockwell referenced this issue in #170

[sudip-mondal-2002]

I am also getting the same error
reciever.html:49 Uncaught TypeError: $(...).animate is not a function

[mjankar]

I am also getting the same error
reciever.html:49 Uncaught TypeError: $(...).animate is not a function

sent me your code

[mjankar]

I do get the same error in Safari

use chrome

[sudip-mondal-2002]

use chrome

But website should run on all browser no? at least on edge

[Patchyst]

I do get the same error in Safari

use chrome

This solution doesn't exactly work for people who want there website to work on more than one browser...