Polymer 1.0 Neon Animations

flash-animation.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.

Configuration:
```
{
  name: 'fade-in-animation',
  node: <node>
  color: <color of flash>
}
```
-->

<script>

  Polymer({

    is: 'flash-animation',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],

    configure: function(config) {
      var node = config.node;
      this._effect = new KeyframeEffect(node, [
        {'backgroundColor': config.color || '#FFF'},
        {'backgroundColor': 'initial'}
      ], {duration: 500});
      return this._effect;
    }

  });

</script>

shake-animation.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.

Configuration:
```
{
  name: 'fade-in-animation',
  node: <node>
  color: <color of flash>
}
```
-->

<script>

  Polymer({

    is: 'shake-animation',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],

    configure: function(config) {
      var node = config.node;
      this._effect = new KeyframeEffect(node, [
        {'left': '-8'},
        {'left': '8'},
        {'left': '-2'},
        {'left': '2'},
        {'left': '-1'},
        {'left': '1'}
      ], {duration: 500});
      return this._effect;
    }

  });

</script>

slide-in-down-animation.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.

Configuration:
```
{
  name: 'fade-in-animation',
  node: <node>,
  color: <color of flash>,
  style: <top|margin-top>
}
```
-->

<script>

  Polymer({

    is: 'slide-in-down-animation',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],
    /* For some reason just passing
     the style sting would not work */

    getEffectUsingTop: function(node) {
      return new KeyframeEffect(node, [
        {'top': -20, 'opacity': 0},
        {'top': 7},
        {'top': 0, 'opacity': 1}
      ], {duration: 500, ease: "cubic-bezier(0,0,0.85,1)" });
      return effect;
    },

    getEffectUsingMargin: function(node) {
      return new KeyframeEffect(node, [
        {'margin-top': -20, 'opacity': 0},
        {'margin-top': 7},
        {'margin-top': 0, 'opacity': 1}
      ], {duration: 500, ease: "cubic-bezier(0,0,0.85,1)" });
    },

    configure: function(config) {
      var node = config.node;
      var attrib = config.attrib;
      if (attrib == "top") {
        this._effect = this.getEffectUsingTop(node);
        console.log("using top")
      } else {
        this._effect = this.getEffectUsingMargin(node);
      }

      return this._effect;
    }

  });

</script>