paper-square-grow-animation.html

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

<!--
`<paper-square-grow-animation>` increases the element's width and height from an initial
predefined pixel square size to its final size.

Configuration:
```
{
  name: 'expand-animation',
  node: <node>,
  startSize: <start-size-in-px>,
  timing: <animation-timing>,
}
```

@hero hero.svg
@demo demo/index.html
-->

<script>
  Polymer({
    is: 'paper-square-grow-animation',
    behaviors: [
      Polymer.NeonAnimationBehavior
    ],
    configure: function(config) {
      var node = config.node;
      var startSize = config.startSize;
      var height = node.getBoundingClientRect().height;
      var width = node.getBoundingClientRect().width;
      this._effect = new KeyframeEffect(node, [{
        height: startSize + 'px',
        width: startSize + 'px'
      }, {
        height: height + 'px',
        width: width + 'px'
      }], this.timingFromConfig(config));
      return this._effect;
    }
  });
</script>