Polymer 3 neon-animations document.timeline.play is not a function

39 views Asked by At

I have a paper-dialog set up like so:

   <paper-dialog
    entry-animation="scale-up-animation"
    exit-animation="fade-out-animation"
   >
    ...
   </paper-dialog>

The dialog works as expected, however thee entry/exit animations don't. I get the following warning in the console:

widget-app.js:385 Couldnt play ( scale-up-animation ). TypeError: document.timeline.play is not a function
    at PolymerGenerated._configureAnimations (neon-animation-runner-behavior.js:62:38)
    at PolymerGenerated.playAnimation (neon-animation-runner-behavior.js:122:30)
    at PolymerGenerated._renderOpened (paper-dialog.js:92:10)
    at PolymerGenerated.__openedChanged (iron-overlay-behavior.js:624:12)
    at PolymerGenerated.nextAnimationFrame (iron-overlay-behavior.js:650:16)

I have imported the following:

import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/neon-animation/neon-animations.js';
import '@polymer/neon-animation/animations/fade-out-animation.js';
import '@polymer/neon-animation/animations/scale-up-animation.js';

What else do I need to import to get animations working correctly?

1

There are 1 answers

0
ZeunO8 On

Installing web-animations-js and importing solved the issue

npm i -s web-animations-js

import 'web-animations-js/web-animations-next.min.js'