<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>