Polymer animation get Keyframes error

Question

I have created a simple animation for my elements, but instead of cool effects I get Uncaught TypeError: Keyframes must be null or an array of keyframes.

<script>
        Polymer({
            is: 'marvin-user-entrance',
            behaviors: [
                Polymer.NeonAnimationRunnerBehavior
            ],
            properties: {
                animationConfig: {
                    value: function() {
                        return {
                            'fade-in':[{name: 'fade-in-animation', node: this}],
                            'fade-out':[{name: 'fade-out-animation', node: this}]
                        }
                    }
                }
            },
            animate: function () {
                this.playAnimation('fade-out');
            },
            ready: function () {
                this.$.auth.animate();
            }
        });

    </script>

It seems that it's not a problem of Polymer itself, but it is somewhere in my code or web animation node...

Answer 1

You should be calling this.animate() instead of this.$.auth.animate() as the animate function is defined inside this Polymer element.

If you want to animate the auth element only, change the node to point to this.$.auth instead of the whole element, like below -

node: this.$.auth

Answer 2

Not exactly sure if this is the root of this but I found that similar errors go away after setting the width and height of the animated element explicitly in CSS in pixels.