Neon animation doesn't work on a div inside a paper-dialog

Question

I want to show a <paper-dialog> and then if I press the <button> inside my <div>, which is here a red rectangle would go up and down inside my <paper-dialog> like it is scanning something. So here's the code of how I create them :

<paper-button raised onclick="dialog.open()">plain dialog</paper-button>

<paper-dialog id="dialog">
      <div id="rect" style="width:100px;height:100px;background-color:red"></div>
      <h1>essai</h1>
      <h1>essai</h1>
      <button on-tap="move" raised>Move above rectangle</button>
      <h1>essai</h1>
      <div id="fin">fin</div>
</paper-dialog>

But the animation doesn't work at all, here's the code for my script :

is: 'my-qrcodescanner',

    behaviors: [
        Polymer.NeonAnimationRunnerBehavior
    ],

    property: {

        animationConfig: {
          value: function () {
            return {
                'move': [{
                    name: 'slide-down-animation',
                    node: this.$.rect
                }, {
                    name: 'slide-up-animation',
                    node: this.$.rect,
                    timing: {delay: 100}
                }]
            }
          }
        }
    },

    move: function () {
        this.playAnimation('move');
    }

I don't see my mistake, my imports are good I checked that and I even tried to create a custom element <my-animatable> with the script for the animation and then use with a style as a red rectangle but it didn't work either.

Here's my full code if needed.

The style is messy for now, I will improve it later I just want the animation to work when the button is clicked.

Answer 1

Problem was in declaration of properties of custom element. It's not property but properties.

This can happen to everyone and for beginners it's hard to recognise this mistake. Since you don't have feedback from Polymer or neon-animation about undefined animation