Polymer: basic animated element

gistfile1.txt

//implement NeonAnimatableBehavior behavior
// or Polymer.NeonAnimationRunnerBehavior if also reponsible for running the animation (ctrl)

Polymer({
  is: 'my-animatable',
  behaviors: [
    Polymer.NeonAnimationRunnerBehavior //I am reponsible for running the animation 
  ],
  properties: {
    animationConfig: {
      value: function() {
        return {
          // provided by neon-animation/animations/scale-down-animation.html
          name: 'scale-down-animation',
          node: this    //which node to use for the baisc animation
        }
      }
    }
  },
  listeners: {
    // this event is fired when the animation finishes
    'neon-animation-finish': '_onNeonAnimationFinish'
  },
  animate: function() {
    // run scale-down-animation
    this.playAnimation();
  },
  _onNeonAnimationFinish: function() {
    console.log('animation done!');
  }
});

preview