├── .github ├── CODEOWNERS └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── animations ├── cascaded-animation.js ├── fade-in-animation.js ├── fade-out-animation.js ├── hero-animation.js ├── opaque-animation.js ├── reverse-ripple-animation.js ├── ripple-animation.js ├── scale-down-animation.js ├── scale-up-animation.js ├── slide-down-animation.js ├── slide-from-bottom-animation.js ├── slide-from-left-animation.js ├── slide-from-right-animation.js ├── slide-from-top-animation.js ├── slide-left-animation.js ├── slide-right-animation.js ├── slide-up-animation.js └── transform-animation.js ├── bower.json ├── demo ├── card │ ├── index.html │ ├── x-card.js │ └── x-cards-list.js ├── declarative │ └── index.html ├── doc │ ├── index.html │ ├── my-animatable.js │ └── my-dialog.js ├── dropdown │ ├── animated-dropdown.js │ └── index.html ├── grid │ ├── animated-grid.js │ ├── fullsize-page-with-card.js │ └── index.html ├── index.html ├── list │ ├── full-view.js │ ├── index.html │ ├── list-demo.js │ └── list-view.js ├── load │ ├── animated-grid.js │ ├── full-page.js │ └── index.html ├── shared-styles.js └── tiles │ ├── circles-page.js │ ├── index.html │ └── squares-page.js ├── formatconfig.json ├── gen-tsd.json ├── guide.md ├── manifest.json ├── neon-animatable-behavior.js ├── neon-animatable.js ├── neon-animated-pages.js ├── neon-animation-behavior.js ├── neon-animation-runner-behavior.js ├── neon-animation.js ├── neon-animations.js ├── neon-shared-element-animatable-behavior.js ├── neon-shared-element-animation-behavior.js ├── package-lock.json ├── package.json ├── test ├── index.html ├── neon-animated-pages-descendant-selection.html ├── neon-animated-pages-lazy.html ├── neon-animated-pages.html └── test-resizable-pages.js └── wct.conf.json /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @e111077 2 | /.travis.yml @azakus 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json 3 | node_modules 4 | *.d.ts 5 | *.tgz 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .github 3 | .travis.yml 4 | formatconfig.json 5 | gen-tsd.json 6 | test/ 7 | wct.conf.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: 'false' 3 | node_js: node 4 | addons: 5 | firefox: latest 6 | chrome: stable 7 | before_script: 8 | - npm install -g polymer-cli 9 | - git checkout package-lock.json 10 | - >- 11 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m 12 | Project is not formatted. Please run "npm run format".' && false) 13 | script: 14 | - xvfb-run polymer test --module-resolution=node --npm 15 | - >- 16 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test 17 | --module-resolution=node --npm -s 'default'; fi 18 | env: 19 | global: 20 | - secure: >- 21 | dl2qLTqBQDe/l4occqGYtMkHsoprPGtvmqMpCzTari4AQ+O5KeGAcKBHIdGMWChKgmNcr+na7iXOtix5+OEbQB0xXZzbyuNgC55yUoF/A9KdaaHd3fQ4gjpS+UImUCMbWP8RvGHD2pwGn3GOGThO+ArLHuozofSKv0CDosAQiP49lQ+kdi88A4zovDfm60RN1SohHukrerKN026RftgnDX44p0X0pZl/Wf+8QG9ToMu/+J3AcqphW/LP/ohpezkglHZU3GbSG7cB6vxbGvt3idiIjnnpMsinDBDUMeqQJe7AKQNYS9si0yyXZvWGOLlNd1pWjkmv/h8hAkQsvnfxMWs+ndxTEA/hbd6OEIQ0jpCEUh7NwMMdpureCaWRS5VpTd1yl0GWwBeWnEvy7/k2vTtCa3+Isvu4TK0B2sUJo5BRfPal1+GHedl+ubhKWD9VMFLE8/d/bzglRPghxvaFyWqbgXEr7gkHt2+hcRLRrWaxgzJqBTJUpl//wrRsKm5Yk+51lHWCcWrjdpbpnV4Vg60mrpGudHH17JSnXNrOPoRMQljT9qWPrDetc9oJJg625EV4VvtXHyBGKMlIL2rp2UKW8PRvDFjpvnvRwlYFONgni0o2vK0IVst+AbDKu90iU2IalRC4PKaE2uypqrzzUJJkHgxZTjbPCItWg/xOzZs= 22 | - secure: >- 23 | kFOE9WM9fvgV5cRJRkemXelXlBbsByu/GQTe4xHX4S5pcOBAJh9Hc2k/L3+nSrm9S1d1QeP27bxtVT2W2ecOP9CZ93xYC6fHWjnJ5k66mkumQ8dbAeiXSz4c0Q5ZWoaCzb1eD7938IlCmAk/sXt7ig+rL2ViyGddK0nszRwKfClUUHsk2MLVWmysjkzXxquuMeCGxX+/RXNfGjn2mRko1XF9RX7QBbb4Gzll7I1Dd1OGD7aClKAFnMem8IJyEhFCctq2Wl8YCfOpKbDKLz9coWj/iDf8XqlWKFWjNPRURGSNeeQG9UTmvZeP5YHFS3t58tI/LKxKprJWPKKpD5pC96P1Jr+4OZyjT0m4Fbc5eaBM0HiXxqE66X7mGGOb7miT6oWh7FiI12QrlUdMeLjHYn7eQcCVadopeG7z+ER6t+pXK9ihPnFY545kbtAUMPLK24FRrej3RfH9CYx6C/uSPTuDNuMbpexb3V6G6g79v4yIMT06hvLUNJTEZ+zQb1jWM7XDZXylzOqOc/Bty6D3KefZi1QDsPsky4WaPic2ZZlb6K0RtKjzaUbOtCxsB7AxIkSHGgFrZE3qgzAg2uVFrPBIYrUM2SlUUPrbuykPE7lDkeimvqLvYeLaIIOEgD3/zsU5Q4aHX059LbI3TwyeLEOFxjuZUDJPiFbydCXXGd8= 24 | dist: trusty 25 | cache: 26 | directories: 27 | - node_modules 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ⚠️ **neon-animation is deprecated** ⚠️ 2 | 3 | Please use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) or [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) instead. See [*An Update on Neon Animation*](https://www.polymer-project.org/blog/2017-07-12-an-update-on-neon-animation) for more information. 4 | 5 | [![Published on NPM](https://img.shields.io/npm/v/@polymer/neon-animation.svg)](https://www.npmjs.com/package/@polymer/neon-animation) 6 | [![Build status](https://travis-ci.org/PolymerElements/neon-animation.svg?branch=master)](https://travis-ci.org/PolymerElements/neon-animation) 7 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/neon-animation) 8 | 9 | ## neon-animation 10 | 11 | `neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/). Please note that these elements do not include the web-animations polyfill. 12 | 13 | See: [Documentation](https://www.webcomponents.org/element/@polymer/neon-animation), 14 | [Demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/index.html). 15 | 16 | _See [the guide](./guide.md) for detailed usage._ 17 | 18 | ## Usage 19 | 20 | ### Installation 21 | 22 | Element: 23 | ``` 24 | npm install --save @polymer/neon-animation 25 | ``` 26 | 27 | Polyfill: 28 | ``` 29 | npm install --save web-animations-js 30 | ``` 31 | 32 | ### In an HTML file 33 | 34 | ### `NeonAnimatableBehavior` 35 | Elements that can be animated by `NeonAnimationRunnerBehavior` should implement the `NeonAnimatableBehavior` behavior, or `NeonAnimationRunnerBehavior` if they're also responsible for running an animation. 36 | 37 | #### In a Polymer 3 element 38 | ```js 39 | import {PolymerElement, html} from '@polymer/polymer'; 40 | import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; 41 | import {NeonAnimatableBehavior} from '@polymer/neon-animation/neon-animatable-behavior.js'; 42 | 43 | class SampleElement extends mixinBehaviors([NeonAnimatableBehavior], PolymerElement) { 44 | static get template() { 45 | return html` 46 | 51 | 52 | 53 | `; 54 | } 55 | } 56 | customElements.define('sample-element', SampleElement); 57 | ``` 58 | 59 | ### `NeonAnimationRunnerBehavior` 60 | 61 | #### In a Polymer 3 element 62 | ```js 63 | import {PolymerElement, html} from '@polymer/polymer'; 64 | import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; 65 | import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js'; 66 | import '@polymer/neon-animation/animations/scale-down-animation.js'; 67 | 68 | class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) { 69 | static get template() { 70 | return html` 71 |
this entire element will be animated after one second
72 | `; 73 | } 74 | 75 | connectedCallback() { 76 | super.connectedCallback(); 77 | 78 | // must be set here because properties is static and cannot reference "this" 79 | this.animationConfig = { 80 | // provided by neon-animation/animations/scale-down-animation.js 81 | name: 'scale-down-animation', 82 | node: this, 83 | }; 84 | 85 | setTimeout(() => this.playAnimation(), 1000); 86 | } 87 | } 88 | customElements.define('sample-element', SampleElement); 89 | ``` 90 | 91 | ### `` 92 | A simple element that implements NeonAnimatableBehavior. 93 | 94 | #### In an html file 95 | ```html 96 | 97 | 98 | 99 | 100 | 101 |
this entire element and its parent will be animated after one second
102 | 103 | 104 | 129 | 130 | 131 | ``` 132 | 133 | #### In a Polymer 3 element 134 | ```js 135 | import {PolymerElement, html} from '@polymer/polymer'; 136 | import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; 137 | import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js'; 138 | import '@polymer/neon-animation/neon-animatable.js'; 139 | import '@polymer/neon-animation/animations/scale-down-animation.js'; 140 | 141 | class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) { 142 | static get template() { 143 | return html` 144 |
this div will not be animated
145 | 146 |
this div and its parent will be animated after one second
147 | 148 | `; 149 | } 150 | 151 | connectedCallback() { 152 | super.connectedCallback(); 153 | 154 | // must be set here because properties is static and cannot reference "this" 155 | this.animationConfig = { 156 | // provided by neon-animation/animations/scale-down-animation.js 157 | name: 'scale-down-animation', 158 | node: this.$.animatable, 159 | }; 160 | 161 | setTimeout(() => this.playAnimation(), 1000); 162 | } 163 | } 164 | customElements.define('sample-element', SampleElement); 165 | ``` 166 | 167 | ### `` 168 | `neon-animated-pages` manages a set of pages and runs an animation when 169 | switching between them. 170 | 171 | #### In an html file 172 | ```html 173 | 174 | 175 | 181 | 182 | 183 | 188 | 1 189 | 2 190 | 3 191 | 4 192 | 5 193 | 194 | 195 | 196 | 201 | 202 | 203 | ``` 204 | 205 | #### In a Polymer 3 element 206 | ```js 207 | import {PolymerElement, html} from '@polymer/polymer'; 208 | import '@polymer/neon-animation/neon-animated-pages.js'; 209 | import '@polymer/neon-animation/neon-animatable.js'; 210 | import '@polymer/neon-animation/animations/slide-from-right-animation.js'; 211 | import '@polymer/neon-animation/animations/slide-left-animation.js'; 212 | 213 | class SampleElement extends PolymerElement { 214 | static get template() { 215 | return html` 216 | 221 | 1 222 | 2 223 | 3 224 | 4 225 | 5 226 | 227 | 228 | 229 | `; 230 | } 231 | 232 | increase() { 233 | this.$.pages.selected = this.$.pages.selected + 1 % 5; 234 | } 235 | 236 | decrease() { 237 | this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5; 238 | } 239 | } 240 | customElements.define('sample-element', SampleElement); 241 | ``` 242 | 243 | #### In a Polymer 3 element 244 | ```js 245 | import {PolymerElement, html} from '@polymer/polymer'; 246 | import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; 247 | import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js'; 248 | import '@polymer/neon-animation/animations/neon-animatable.js'; 249 | import '@polymer/neon-animation/animations/scale-down-animation.js'; 250 | 251 | class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) { 252 | static get template() { 253 | return html` 254 |
this div will not be animated
255 | 256 |
this div and its parent will be animated after one second
257 | 258 | `; 259 | } 260 | 261 | connectedCallback() { 262 | super.connectedCallback(); 263 | 264 | // must be set here because properties is static and cannot reference "this" 265 | this.animationConfig = { 266 | // provided by neon-animation/animations/scale-down-animation.js 267 | name: 'scale-down-animation', 268 | node: this.$.animatable, 269 | }; 270 | 271 | setTimeout(() => this.playAnimation(), 1000); 272 | } 273 | } 274 | customElements.define('sample-element', SampleElement); 275 | ``` 276 | 277 | ## Contributing 278 | If you want to send a PR to this element, here are 279 | the instructions for running the tests and demo locally: 280 | 281 | ### Installation 282 | ```sh 283 | git clone https://github.com/PolymerElements/neon-animation 284 | cd neon-animation 285 | npm install 286 | npm install -g polymer-cli 287 | ``` 288 | 289 | ### Running the demo locally 290 | ```sh 291 | polymer serve --npm 292 | open http://127.0.0.1:/demo/ 293 | ``` 294 | 295 | ### Running the tests 296 | ```sh 297 | polymer test --npm 298 | ``` 299 | -------------------------------------------------------------------------------- /animations/cascaded-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` applies an animation on an array of elements with a delay 17 | between each. the delay defaults to 50ms. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'cascaded-animation', 23 | animation: , 24 | nodes: , 25 | nodeDelay: , 26 | timing: 27 | } 28 | ``` 29 | */ 30 | Polymer({ 31 | is: 'cascaded-animation', 32 | /** @override */ 33 | _template: null, 34 | 35 | behaviors: [NeonAnimationBehavior], 36 | 37 | /** 38 | * @param {{ 39 | * animation: string, 40 | * nodes: !Array, 41 | * nodeDelay: (number|undefined), 42 | * timing: (Object|undefined) 43 | * }} config 44 | */ 45 | configure: function(config) { 46 | this._animations = []; 47 | var nodes = config.nodes; 48 | var effects = []; 49 | var nodeDelay = config.nodeDelay || 50; 50 | 51 | config.timing = config.timing || {}; 52 | config.timing.delay = config.timing.delay || 0; 53 | 54 | var oldDelay = config.timing.delay; 55 | var abortedConfigure; 56 | for (var node, index = 0; node = nodes[index]; index++) { 57 | config.timing.delay += nodeDelay; 58 | config.node = node; 59 | 60 | var animation = document.createElement(config.animation); 61 | if (animation.isNeonAnimation) { 62 | var effect = animation.configure(config); 63 | 64 | this._animations.push(animation); 65 | effects.push(effect); 66 | } else { 67 | console.warn(this.is + ':', config.animation, 'not found!'); 68 | abortedConfigure = true; 69 | break; 70 | } 71 | } 72 | config.timing.delay = oldDelay; 73 | config.node = null; 74 | // if a bad animation was configured, abort config. 75 | if (abortedConfigure) { 76 | return; 77 | } 78 | 79 | this._effect = new GroupEffect(effects); 80 | return this._effect; 81 | }, 82 | 83 | complete: function() { 84 | for (var animation, index = 0; animation = this._animations[index]; 85 | index++) { 86 | animation.complete(animation.config); 87 | } 88 | } 89 | 90 | }); 91 | -------------------------------------------------------------------------------- /animations/fade-in-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the opacity of an element from 0 to 1. 17 | 18 | Configuration: 19 | ``` 20 | { 21 | name: 'fade-in-animation', 22 | node: 23 | timing: 24 | } 25 | ``` 26 | */ 27 | Polymer({ 28 | 29 | is: 'fade-in-animation', 30 | /** @override */ 31 | _template: null, 32 | 33 | behaviors: [NeonAnimationBehavior], 34 | 35 | configure: function(config) { 36 | var node = config.node; 37 | this._effect = new KeyframeEffect( 38 | node, 39 | [{'opacity': '0'}, {'opacity': '1'}], 40 | this.timingFromConfig(config)); 41 | return this._effect; 42 | } 43 | 44 | }); 45 | -------------------------------------------------------------------------------- /animations/fade-out-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the opacity of an element from 1 to 0. 17 | 18 | Configuration: 19 | ``` 20 | { 21 | name: 'fade-out-animation', 22 | node: 23 | timing: 24 | } 25 | ``` 26 | */ 27 | Polymer({ 28 | 29 | is: 'fade-out-animation', 30 | /** @override */ 31 | _template: null, 32 | 33 | behaviors: [NeonAnimationBehavior], 34 | 35 | configure: function(config) { 36 | var node = config.node; 37 | this._effect = new KeyframeEffect( 38 | node, 39 | [ 40 | {'opacity': '1'}, 41 | {'opacity': '0'}, 42 | ], 43 | this.timingFromConfig(config)); 44 | return this._effect; 45 | } 46 | 47 | }); 48 | -------------------------------------------------------------------------------- /animations/hero-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonSharedElementAnimationBehavior} from '../neon-shared-element-animation-behavior.js'; 15 | /* 16 | `` is a shared element animation that scales and transform an 17 | element such that it appears to be shared between two pages. Use this in 18 | ``. The source page should use this animation in an 'exit' 19 | animation and set the `fromPage` configuration property to itself, and the 20 | destination page should use this animation in an `entry` animation and set the 21 | `toPage` configuration property to itself. They should also define the hero 22 | elements in the `sharedElements` property (not a configuration property, see 23 | `NeonSharedElementAnimatableBehavior`). 24 | 25 | Configuration: 26 | ``` 27 | { 28 | name: 'hero-animation', 29 | id: , 30 | timing: , 31 | toPage: , /* define for the destination page *\/ 32 | fromPage: , /* define for the source page *\/ 33 | } 34 | ``` 35 | */ 36 | Polymer({ 37 | 38 | is: 'hero-animation', 39 | /** @override */ 40 | _template: null, 41 | 42 | behaviors: [NeonSharedElementAnimationBehavior], 43 | 44 | configure: function(config) { 45 | var shared = this.findSharedElements(config); 46 | if (!shared) { 47 | return; 48 | } 49 | 50 | var fromRect = shared.from.getBoundingClientRect(); 51 | var toRect = shared.to.getBoundingClientRect(); 52 | 53 | var deltaLeft = fromRect.left - toRect.left; 54 | var deltaTop = fromRect.top - toRect.top; 55 | var deltaWidth = fromRect.width / toRect.width; 56 | var deltaHeight = fromRect.height / toRect.height; 57 | 58 | this._effect = new KeyframeEffect( 59 | shared.to, 60 | [ 61 | { 62 | 'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 63 | 'px) scale(' + deltaWidth + ',' + deltaHeight + ')' 64 | }, 65 | {'transform': 'none'} 66 | ], 67 | this.timingFromConfig(config)); 68 | 69 | this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0'); 70 | shared.to.style.zIndex = 10000; 71 | shared.from.style.visibility = 'hidden'; 72 | 73 | return this._effect; 74 | }, 75 | 76 | complete: function(config) { 77 | var shared = this.findSharedElements(config); 78 | if (!shared) { 79 | return null; 80 | } 81 | shared.to.style.zIndex = ''; 82 | shared.from.style.visibility = ''; 83 | } 84 | 85 | }); 86 | -------------------------------------------------------------------------------- /animations/opaque-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` makes an element `opacity:1` for the duration of the 17 | animation. Used to prevent webkit/safari from drawing a frame before an 18 | animation for elements that animate from display:none. 19 | */ 20 | Polymer({ 21 | 22 | is: 'opaque-animation', 23 | /** @override */ 24 | _template: null, 25 | 26 | behaviors: [NeonAnimationBehavior], 27 | 28 | configure: function(config) { 29 | var node = config.node; 30 | this._effect = new KeyframeEffect( 31 | node, 32 | [ 33 | {'opacity': '1'}, 34 | {'opacity': '1'}, 35 | ], 36 | this.timingFromConfig(config)); 37 | node.style.opacity = '0'; 38 | return this._effect; 39 | }, 40 | 41 | complete: function(config) { 42 | config.node.style.opacity = ''; 43 | } 44 | 45 | }); 46 | -------------------------------------------------------------------------------- /animations/reverse-ripple-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonSharedElementAnimationBehavior} from '../neon-shared-element-animation-behavior.js'; 15 | /* 16 | `` scales and transform an element such that it 17 | appears to ripple down from this element, to either a shared element, or a 18 | screen position. 19 | 20 | If using as a shared element animation in ``, use this 21 | animation in an `exit` animation in the source page and in an `entry` animation 22 | in the destination page. Also, define the reverse-ripple elements in the 23 | `sharedElements` property (not a configuration property, see 24 | `NeonSharedElementAnimatableBehavior`). 25 | If using a screen position, define the `gesture` property. 26 | Configuration: 27 | ``` 28 | { 29 | name: 'reverse-ripple-animation`. 30 | id: , /* set this or gesture *\/ 31 | gesture: {x: , y: }, /* set this or id *\/ 32 | timing: , 33 | toPage: , /* define for the destination page *\/ 34 | fromPage: , /* define for the source page *\/ 35 | } 36 | ``` 37 | */ 38 | Polymer({ 39 | is: 'reverse-ripple-animation', 40 | /** @override */ 41 | _template: null, 42 | 43 | behaviors: [NeonSharedElementAnimationBehavior], 44 | 45 | configure: function(config) { 46 | var shared = this.findSharedElements(config); 47 | if (!shared) { 48 | return null; 49 | } 50 | 51 | var translateX, translateY; 52 | var fromRect = shared.from.getBoundingClientRect(); 53 | if (config.gesture) { 54 | translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2)); 55 | translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2)); 56 | } else { 57 | var toRect = shared.to.getBoundingClientRect(); 58 | translateX = (toRect.left + (toRect.width / 2)) - 59 | (fromRect.left + (fromRect.width / 2)); 60 | translateY = (toRect.top + (toRect.height / 2)) - 61 | (fromRect.top + (fromRect.height / 2)); 62 | } 63 | var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; 64 | 65 | var size = Math.max( 66 | fromRect.width + Math.abs(translateX) * 2, 67 | fromRect.height + Math.abs(translateY) * 2); 68 | var diameter = Math.sqrt(2 * size * size); 69 | var scaleX = diameter / fromRect.width; 70 | var scaleY = diameter / fromRect.height; 71 | var scale = 'scale(' + scaleX + ',' + scaleY + ')'; 72 | 73 | this._effect = new KeyframeEffect( 74 | shared.from, 75 | [ 76 | {'transform': translate + ' ' + scale}, 77 | {'transform': translate + ' scale(0)'}, 78 | ], 79 | this.timingFromConfig(config)); 80 | 81 | this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%'); 82 | shared.from.style.borderRadius = '50%'; 83 | 84 | return this._effect; 85 | }, 86 | 87 | complete: function() { 88 | if (this.sharedElements) { 89 | this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', ''); 90 | this.sharedElements.from.style.borderRadius = ''; 91 | } 92 | } 93 | }); 94 | -------------------------------------------------------------------------------- /animations/ripple-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonSharedElementAnimationBehavior} from '../neon-shared-element-animation-behavior.js'; 15 | /* 16 | `` scales and transform an element such that it appears to 17 | ripple from either a shared element, or from a screen position, to full screen. 18 | 19 | If using as a shared element animation in ``, use this 20 | animation in an `exit` animation in the source page and in an `entry` animation 21 | in the destination page. Also, define the hero elements in the `sharedElements` 22 | property (not a configuration property, see 23 | `NeonSharedElementAnimatableBehavior`). 24 | 25 | If using a screen position, define the `gesture` property. 26 | 27 | Configuration: 28 | ``` 29 | { 30 | name: 'ripple-animation`. 31 | id: , /* set this or gesture *\/ 32 | gesture: {x: , y: }, /* set this or id *\/ 33 | timing: , 34 | toPage: , /* define for the destination page *\/ 35 | fromPage: , /* define for the source page *\/ 36 | } 37 | ``` 38 | */ 39 | Polymer({ 40 | 41 | is: 'ripple-animation', 42 | /** @override */ 43 | _template: null, 44 | 45 | behaviors: [NeonSharedElementAnimationBehavior], 46 | 47 | configure: function(config) { 48 | var shared = this.findSharedElements(config); 49 | if (!shared) { 50 | return null; 51 | } 52 | 53 | var translateX, translateY; 54 | var toRect = shared.to.getBoundingClientRect(); 55 | if (config.gesture) { 56 | translateX = config.gesture.x - (toRect.left + (toRect.width / 2)); 57 | translateY = config.gesture.y - (toRect.top + (toRect.height / 2)); 58 | } else { 59 | var fromRect = shared.from.getBoundingClientRect(); 60 | translateX = (fromRect.left + (fromRect.width / 2)) - 61 | (toRect.left + (toRect.width / 2)); 62 | translateY = (fromRect.top + (fromRect.height / 2)) - 63 | (toRect.top + (toRect.height / 2)); 64 | } 65 | var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; 66 | 67 | var size = Math.max( 68 | toRect.width + Math.abs(translateX) * 2, 69 | toRect.height + Math.abs(translateY) * 2); 70 | var diameter = Math.sqrt(2 * size * size); 71 | var scaleX = diameter / toRect.width; 72 | var scaleY = diameter / toRect.height; 73 | var scale = 'scale(' + scaleX + ',' + scaleY + ')'; 74 | 75 | this._effect = new KeyframeEffect( 76 | shared.to, 77 | [ 78 | {'transform': translate + ' scale(0)'}, 79 | {'transform': translate + ' ' + scale} 80 | ], 81 | this.timingFromConfig(config)); 82 | 83 | this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%'); 84 | shared.to.style.borderRadius = '50%'; 85 | 86 | return this._effect; 87 | }, 88 | 89 | complete: function() { 90 | if (this.sharedElements) { 91 | this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', ''); 92 | this.sharedElements.to.style.borderRadius = ''; 93 | } 94 | } 95 | 96 | }); 97 | -------------------------------------------------------------------------------- /animations/scale-down-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the scale transform of an element from 1 to 0. 17 | By default it scales in both the x and y axes. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'scale-down-animation', 23 | node: , 24 | axis: 'x' | 'y' | '', 25 | transformOrigin: , 26 | timing: 27 | } 28 | ``` 29 | */ 30 | Polymer({ 31 | 32 | is: 'scale-down-animation', 33 | /** @override */ 34 | _template: null, 35 | 36 | behaviors: [NeonAnimationBehavior], 37 | 38 | configure: function(config) { 39 | var node = config.node; 40 | 41 | var scaleProperty = 'scale(0, 0)'; 42 | if (config.axis === 'x') { 43 | scaleProperty = 'scale(0, 1)'; 44 | } else if (config.axis === 'y') { 45 | scaleProperty = 'scale(1, 0)'; 46 | } 47 | 48 | this._effect = new KeyframeEffect( 49 | node, 50 | [ 51 | {'transform': 'scale(1,1)'}, 52 | {'transform': scaleProperty}, 53 | ], 54 | this.timingFromConfig(config)); 55 | 56 | if (config.transformOrigin) { 57 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 58 | } 59 | 60 | return this._effect; 61 | } 62 | 63 | }); 64 | -------------------------------------------------------------------------------- /animations/scale-up-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the scale transform of an element from 0 to 1. 17 | By default it scales in both the x and y axes. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'scale-up-animation', 23 | node: , 24 | axis: 'x' | 'y' | '', 25 | transformOrigin: , 26 | timing: 27 | } 28 | ``` 29 | */ 30 | Polymer({ 31 | 32 | is: 'scale-up-animation', 33 | /** @override */ 34 | _template: null, 35 | 36 | behaviors: [NeonAnimationBehavior], 37 | 38 | configure: function(config) { 39 | var node = config.node; 40 | 41 | var scaleProperty = 'scale(0)'; 42 | if (config.axis === 'x') { 43 | scaleProperty = 'scale(0, 1)'; 44 | } else if (config.axis === 'y') { 45 | scaleProperty = 'scale(1, 0)'; 46 | } 47 | 48 | this._effect = new KeyframeEffect( 49 | node, 50 | [{'transform': scaleProperty}, {'transform': 'scale(1, 1)'}], 51 | this.timingFromConfig(config)); 52 | 53 | if (config.transformOrigin) { 54 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 55 | } 56 | 57 | return this._effect; 58 | } 59 | 60 | }); 61 | -------------------------------------------------------------------------------- /animations/slide-down-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from `none` 17 | `translateY(100%)`. The `transformOrigin` defaults to `50% 0`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-down-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | 31 | is: 'slide-down-animation', 32 | /** @override */ 33 | _template: null, 34 | 35 | behaviors: [NeonAnimationBehavior], 36 | 37 | configure: function(config) { 38 | var node = config.node; 39 | 40 | this._effect = new KeyframeEffect( 41 | node, 42 | [ 43 | {'transform': 'translateY(0%)'}, 44 | {'transform': 'translateY(100%)'}, 45 | ], 46 | this.timingFromConfig(config)); 47 | 48 | if (config.transformOrigin) { 49 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 50 | } else { 51 | this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); 52 | } 53 | 54 | return this._effect; 55 | } 56 | 57 | }); 58 | -------------------------------------------------------------------------------- /animations/slide-from-bottom-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from `none` 17 | to `translateY(100%)`. The `transformOrigin` defaults to `50% 0`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-from-bottom-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | is: 'slide-from-bottom-animation', 31 | /** @override */ 32 | _template: null, 33 | 34 | behaviors: [NeonAnimationBehavior], 35 | 36 | configure: function(config) { 37 | var node = config.node; 38 | 39 | this._effect = new KeyframeEffect( 40 | node, 41 | [ 42 | {'transform': 'translateY(100%)'}, 43 | {'transform': 'translateY(0)'}, 44 | ], 45 | this.timingFromConfig(config)); 46 | 47 | if (config.transformOrigin) { 48 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 49 | } else { 50 | this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); 51 | } 52 | 53 | return this._effect; 54 | } 55 | 56 | }); 57 | -------------------------------------------------------------------------------- /animations/slide-from-left-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from 17 | `translateX(-100%)` to `none`. 18 | The `transformOrigin` defaults to `0 50%`. 19 | 20 | Configuration: 21 | ``` 22 | { 23 | name: 'slide-from-left-animation', 24 | node: , 25 | transformOrigin: , 26 | timing: 27 | } 28 | ``` 29 | */ 30 | Polymer({ 31 | 32 | is: 'slide-from-left-animation', 33 | /** @override */ 34 | _template: null, 35 | 36 | behaviors: [NeonAnimationBehavior], 37 | 38 | configure: function(config) { 39 | var node = config.node; 40 | 41 | this._effect = new KeyframeEffect( 42 | node, 43 | [ 44 | {'transform': 'translateX(-100%)'}, 45 | {'transform': 'none'}, 46 | ], 47 | this.timingFromConfig(config)); 48 | 49 | if (config.transformOrigin) { 50 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 51 | } else { 52 | this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); 53 | } 54 | 55 | return this._effect; 56 | } 57 | 58 | }); 59 | -------------------------------------------------------------------------------- /animations/slide-from-right-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | 12 | import '@polymer/polymer/polymer-legacy.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 16 | /* 17 | `` animates the transform of an element from 18 | `translateX(100%)` to `none`. 19 | The `transformOrigin` defaults to `0 50%`. 20 | 21 | Configuration: 22 | ``` 23 | { 24 | name: 'slide-from-right-animation', 25 | node: , 26 | transformOrigin: , 27 | timing: 28 | } 29 | ``` 30 | */ 31 | Polymer({ 32 | 33 | is: 'slide-from-right-animation', 34 | /** @override */ 35 | _template: null, 36 | 37 | behaviors: [NeonAnimationBehavior], 38 | 39 | configure: function(config) { 40 | var node = config.node; 41 | 42 | this._effect = new KeyframeEffect( 43 | node, 44 | [{'transform': 'translateX(100%)'}, {'transform': 'none'}], 45 | this.timingFromConfig(config)); 46 | 47 | if (config.transformOrigin) { 48 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 49 | } else { 50 | this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); 51 | } 52 | 53 | return this._effect; 54 | } 55 | 56 | }); 57 | -------------------------------------------------------------------------------- /animations/slide-from-top-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from 17 | `translateY(-100%)` to `none`. The `transformOrigin` defaults to `50% 0`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-from-top-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | is: 'slide-from-top-animation', 31 | /** @override */ 32 | _template: null, 33 | 34 | behaviors: [NeonAnimationBehavior], 35 | 36 | configure: function(config) { 37 | var node = config.node; 38 | 39 | this._effect = new KeyframeEffect( 40 | node, 41 | [{'transform': 'translateY(-100%)'}, {'transform': 'translateY(0%)'}], 42 | this.timingFromConfig(config)); 43 | 44 | if (config.transformOrigin) { 45 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 46 | } else { 47 | this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); 48 | } 49 | 50 | return this._effect; 51 | } 52 | 53 | }); 54 | -------------------------------------------------------------------------------- /animations/slide-left-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from `none` to 17 | `translateX(-100%)`. The `transformOrigin` defaults to `0 50%`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-left-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | is: 'slide-left-animation', 31 | /** @override */ 32 | _template: null, 33 | 34 | behaviors: [NeonAnimationBehavior], 35 | 36 | configure: function(config) { 37 | var node = config.node; 38 | 39 | this._effect = new KeyframeEffect( 40 | node, 41 | [{'transform': 'none'}, {'transform': 'translateX(-100%)'}], 42 | this.timingFromConfig(config)); 43 | 44 | if (config.transformOrigin) { 45 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 46 | } else { 47 | this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); 48 | } 49 | 50 | return this._effect; 51 | } 52 | 53 | }); 54 | -------------------------------------------------------------------------------- /animations/slide-right-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from `none` to 17 | `translateX(100%)`. The `transformOrigin` defaults to `0 50%`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-right-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | 31 | is: 'slide-right-animation', 32 | /** @override */ 33 | _template: null, 34 | 35 | behaviors: [NeonAnimationBehavior], 36 | 37 | configure: function(config) { 38 | var node = config.node; 39 | 40 | this._effect = new KeyframeEffect( 41 | node, 42 | [{'transform': 'none'}, {'transform': 'translateX(100%)'}], 43 | this.timingFromConfig(config)); 44 | 45 | if (config.transformOrigin) { 46 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 47 | } else { 48 | this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); 49 | } 50 | 51 | return this._effect; 52 | } 53 | 54 | }); 55 | -------------------------------------------------------------------------------- /animations/slide-up-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates the transform of an element from `translateY(0)` 17 | to `translateY(-100%)`. The `transformOrigin` defaults to `50% 0`. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'slide-up-animation', 23 | node: , 24 | transformOrigin: , 25 | timing: 26 | } 27 | ``` 28 | */ 29 | Polymer({ 30 | is: 'slide-up-animation', 31 | /** @override */ 32 | _template: null, 33 | 34 | behaviors: [NeonAnimationBehavior], 35 | 36 | configure: function(config) { 37 | var node = config.node; 38 | 39 | this._effect = new KeyframeEffect( 40 | node, 41 | [{'transform': 'translate(0)'}, {'transform': 'translateY(-100%)'}], 42 | this.timingFromConfig(config)); 43 | 44 | if (config.transformOrigin) { 45 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 46 | } else { 47 | this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); 48 | } 49 | 50 | return this._effect; 51 | } 52 | 53 | }); 54 | -------------------------------------------------------------------------------- /animations/transform-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {NeonAnimationBehavior} from '../neon-animation-behavior.js'; 15 | /* 16 | `` animates a custom transform on an element. Use this to 17 | animate multiple transform properties, or to apply a custom transform value. 18 | 19 | Configuration: 20 | ``` 21 | { 22 | name: 'transform-animation', 23 | node: , 24 | transformOrigin: , 25 | transformFrom: , 26 | transformTo: , 27 | timing: 28 | } 29 | ``` 30 | */ 31 | Polymer({ 32 | is: 'transform-animation', 33 | /** @override */ 34 | _template: null, 35 | 36 | behaviors: [NeonAnimationBehavior], 37 | 38 | /** 39 | * @param {{ 40 | * node: !Element, 41 | * transformOrigin: (string|undefined), 42 | * transformFrom: (string|undefined), 43 | * transformTo: (string|undefined), 44 | * timing: (Object|undefined) 45 | * }} config 46 | */ 47 | configure: function(config) { 48 | var node = config.node; 49 | var transformFrom = config.transformFrom || 'none'; 50 | var transformTo = config.transformTo || 'none'; 51 | 52 | this._effect = new KeyframeEffect( 53 | node, 54 | [{'transform': transformFrom}, {'transform': transformTo}], 55 | this.timingFromConfig(config)); 56 | 57 | if (config.transformOrigin) { 58 | this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); 59 | } 60 | 61 | return this._effect; 62 | } 63 | 64 | }); 65 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "neon-animation", 3 | "license": "http://polymer.github.io/LICENSE.txt" 4 | } 5 | -------------------------------------------------------------------------------- /demo/card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: card 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 77 | 78 | 79 | 80 | 81 | 82 | 134 | 135 | 136 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /demo/card/x-card.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 18 | 19 | Polymer({ 20 | _template: html` 21 | 32 | 33 |
34 |
35 | 36 |
37 | `, 38 | 39 | is: 'x-card', 40 | behaviors: [NeonSharedElementAnimatableBehavior], 41 | 42 | properties: { 43 | animationConfig: {type: Object}, 44 | 45 | sharedElements: {type: Object} 46 | }, 47 | 48 | attached: function() { 49 | if (this.animationConfig) { 50 | return; 51 | } 52 | 53 | this.animationConfig = { 54 | 'entry': [ 55 | {name: 'ripple-animation', id: 'ripple', toPage: this}, 56 | { 57 | name: 'fade-out-animation', 58 | node: this.$.placeholder, 59 | timing: {delay: 250}, 60 | }, 61 | { 62 | name: 'fade-in-animation', 63 | node: this.$.container, 64 | timing: {delay: 50}, 65 | } 66 | ], 67 | 68 | 'exit': [ 69 | { 70 | name: 'fade-out-animation', 71 | node: this.$.container, 72 | timing: {duration: 0}, 73 | }, 74 | { 75 | name: 'reverse-ripple-animation', 76 | id: 'reverse-ripple', 77 | fromPage: this, 78 | } 79 | ] 80 | }; 81 | 82 | this.sharedElements = { 83 | 'ripple': this.$.placeholder, 84 | 'reverse-ripple': this.$.placeholder 85 | }; 86 | } 87 | }); 88 | -------------------------------------------------------------------------------- /demo/card/x-cards-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 18 | 19 | Polymer({ 20 | _template: html` 21 | 33 | 34 |
35 |
36 | 37 |
38 | `, 39 | 40 | is: 'x-cards-list', 41 | behaviors: [NeonSharedElementAnimatableBehavior], 42 | properties: { 43 | animationConfig: {type: Object}, 44 | }, 45 | 46 | attached: function() { 47 | if (this.animationConfig) { 48 | return; 49 | } 50 | 51 | this.animationConfig = { 52 | 'entry': [{ 53 | name: 'reverse-ripple-animation', 54 | id: 'reverse-ripple', 55 | toPage: this, 56 | }], 57 | 58 | 'exit': [ 59 | { 60 | name: 'fade-out-animation', 61 | node: this.$.container, 62 | timing: {delay: 150, duration: 0}, 63 | }, 64 | { 65 | name: 'ripple-animation', 66 | id: 'ripple', 67 | fromPage: this, 68 | } 69 | ] 70 | }; 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /demo/declarative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: declarative 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 79 | 80 | 81 | 82 | 83 | 84 | 101 | 102 | 103 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /demo/doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animation demo: basic 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 29 | 41 | 42 | 43 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/doc/my-animatable.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '../../animations/scale-down-animation.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonAnimationRunnerBehavior} from '../../neon-animation-runner-behavior.js'; 18 | 19 | Polymer({ 20 | _template: html` 21 | 30 | 31 | `, 32 | 33 | is: 'my-animatable', 34 | behaviors: [NeonAnimationRunnerBehavior], 35 | 36 | properties: { 37 | 38 | animationConfig: { 39 | type: Object, 40 | value: function() { 41 | return { 42 | name: 'scale-down-animation', node: this 43 | } 44 | } 45 | } 46 | 47 | }, 48 | 49 | listeners: {'neon-animation-finish': '_onNeonAnimationFinish'}, 50 | 51 | animate: function() { 52 | this.playAnimation(); 53 | }, 54 | 55 | _onNeonAnimationFinish: function() { 56 | console.log('animation finish!'); 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /demo/doc/my-dialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/paper-styles/shadow.js'; 13 | import '../../animations/scale-up-animation.js'; 14 | import '../../animations/fade-out-animation.js'; 15 | 16 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 17 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 18 | 19 | import {NeonAnimationRunnerBehavior} from '../../neon-animation-runner-behavior.js'; 20 | 21 | Polymer({ 22 | _template: html` 23 | 35 | 36 | `, 37 | 38 | is: 'my-dialog', 39 | behaviors: [NeonAnimationRunnerBehavior], 40 | 41 | properties: { 42 | 43 | opened: {type: Boolean}, 44 | 45 | animationConfig: { 46 | type: Object, 47 | value: function() { 48 | return { 49 | 'entry': [{name: 'scale-up-animation', node: this}], 50 | 'exit': [{name: 'fade-out-animation', node: this}] 51 | } 52 | } 53 | } 54 | 55 | }, 56 | 57 | listeners: {'neon-animation-finish': '_onAnimationFinish'}, 58 | 59 | _onAnimationFinish: function() { 60 | if (!this.opened) { 61 | this.style.display = ''; 62 | } 63 | }, 64 | 65 | show: function() { 66 | this.opened = true; 67 | this.style.display = 'inline-block'; 68 | this.playAnimation('entry'); 69 | }, 70 | 71 | hide: function() { 72 | this.opened = false; 73 | this.playAnimation('exit'); 74 | } 75 | }); 76 | -------------------------------------------------------------------------------- /demo/dropdown/animated-dropdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/paper-styles/shadow.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonAnimationRunnerBehavior} from '../../neon-animation-runner-behavior.js'; 18 | 19 | Polymer({ 20 | _template: html` 21 | 31 | 32 | `, 33 | 34 | is: 'animated-dropdown', 35 | behaviors: [NeonAnimationRunnerBehavior], 36 | 37 | properties: { 38 | 39 | animationConfig: { 40 | type: Object, 41 | value: function() { 42 | return { 43 | 'entry': [{ 44 | name: 'scale-up-animation', 45 | node: this, 46 | transformOrigin: '0 0', 47 | }], 48 | 'exit': [{name: 'fade-out-animation', node: this}], 49 | }; 50 | } 51 | }, 52 | 53 | _showing: {type: Boolean, value: false} 54 | 55 | }, 56 | 57 | listeners: {'neon-animation-finish': '_onAnimationFinish'}, 58 | 59 | _onAnimationFinish: function() { 60 | if (this._showing) { 61 | } else { 62 | this.style.display = ''; 63 | } 64 | }, 65 | 66 | show: function() { 67 | this.style.display = 'inline-block'; 68 | this._showing = true; 69 | this.playAnimation('entry'); 70 | }, 71 | 72 | hide: function() { 73 | this._showing = false; 74 | this.playAnimation('exit'); 75 | } 76 | }); 77 | -------------------------------------------------------------------------------- /demo/dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: dropdown 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /demo/grid/animated-grid.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/paper-styles/typography.js'; 13 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 14 | import '../shared-styles.js'; 15 | 16 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 17 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 18 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 19 | 20 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 21 | 22 | Polymer({ 23 | _template: html` 24 | 78 | 79 | 84 | `, 85 | 86 | is: 'animated-grid', 87 | behaviors: [NeonSharedElementAnimatableBehavior], 88 | 89 | properties: { 90 | 91 | config: { 92 | type: Array, 93 | value: function() { 94 | return [ 95 | {value: 1, color: 'blue'}, 96 | {value: 2, color: 'red'}, 97 | {value: 3, color: 'blue'}, 98 | {value: 4, color: 'green'}, 99 | {value: 5, color: 'yellow'}, 100 | {value: 6, color: 'blue'}, 101 | {value: 7, color: 'red'}, 102 | {value: 8, color: 'green'}, 103 | {value: 9, color: 'yellow'}, 104 | {value: 10, color: 'red'} 105 | ] 106 | } 107 | }, 108 | 109 | animationConfig: { 110 | type: Object, 111 | value: function() { 112 | return { 113 | 'exit': [ 114 | { 115 | name: 'ripple-animation', 116 | id: 'ripple', 117 | fromPage: this, 118 | }, 119 | { 120 | name: 'hero-animation', 121 | id: 'hero', 122 | fromPage: this, 123 | } 124 | ] 125 | } 126 | } 127 | } 128 | 129 | }, 130 | 131 | _computeTileClass: function(color) { 132 | return 'tile ' + color + '-300'; 133 | }, 134 | 135 | _onClick: function(event) { 136 | var target = dom(event).rootTarget; 137 | 138 | if (!target.item) { 139 | target = dom(target).parentNode; 140 | } 141 | 142 | // configure the page animation 143 | this.sharedElements = { 144 | 'hero': target, 145 | 'ripple': target, 146 | }; 147 | this.animationConfig['exit'][0].gesture = { 148 | x: event.x || event.pageX, 149 | y: event.y || event.pageY, 150 | }; 151 | 152 | this.fire('tile-click', {tile: target, data: target.item}); 153 | } 154 | }); 155 | -------------------------------------------------------------------------------- /demo/grid/fullsize-page-with-card.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/paper-styles/color.js'; 13 | import '../shared-styles.js'; 14 | 15 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 16 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 17 | 18 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 19 | 20 | Polymer({ 21 | _template: html` 22 | 23 | 45 | 46 |
47 |
48 | `, 49 | 50 | is: 'fullsize-page-with-card', 51 | behaviors: [NeonSharedElementAnimatableBehavior], 52 | 53 | properties: { 54 | 55 | color: {type: String}, 56 | 57 | sharedElements: {type: Object}, 58 | 59 | animationConfig: {type: Object} 60 | }, 61 | 62 | attached: function() { 63 | if (this.animationConfig) { 64 | return; 65 | } 66 | 67 | this.sharedElements = { 68 | 'hero': this.$.card, 69 | 'ripple': this.$.fixed, 70 | }; 71 | 72 | this.animationConfig = { 73 | 'entry': [ 74 | { 75 | name: 'ripple-animation', 76 | id: 'ripple', 77 | toPage: this, 78 | }, 79 | { 80 | name: 'hero-animation', 81 | id: 'hero', 82 | toPage: this, 83 | timing: {delay: 150}, 84 | }, 85 | ], 86 | 'exit': [ 87 | { 88 | name: 'fade-out-animation', 89 | node: this.$.fixed, 90 | }, 91 | { 92 | name: 'transform-animation', 93 | transformFrom: 'none', 94 | transformTo: 'translate(0px,-200vh) scale(0.9,1)', 95 | node: this.$.card, 96 | }, 97 | ] 98 | }; 99 | }, 100 | 101 | _computeCardClass: function(color) { 102 | var cls = 'card'; 103 | if (color) { 104 | cls += ' ' + color + '-300'; 105 | } 106 | return cls; 107 | }, 108 | 109 | _computeFixedBackgroundClass: function(color) { 110 | var cls = 'fixed'; 111 | if (color) { 112 | cls += ' ' + color + '-100'; 113 | } 114 | return cls; 115 | } 116 | }); 117 | -------------------------------------------------------------------------------- /demo/grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: grid 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 32 | 33 | 34 | 35 | 36 | 37 | 44 | 45 | 46 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated pages demo 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 30 | 31 |
32 |
33 |

Sample demos

34 |
35 | basic 36 | declarative 37 | dropdown 38 | grid 39 | list 40 | load 41 | tiles 42 | card 43 |
44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /demo/list/full-view.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | import '@polymer/paper-styles/shadow.js'; 14 | import '@polymer/app-layout/app-toolbar/app-toolbar.js'; 15 | 16 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 17 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 18 | 19 | import {NeonAnimatableBehavior} from '../../neon-animatable-behavior.js'; 20 | 21 | Polymer({ 22 | _template: html` 23 | 59 | 60 | 61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 | `, 70 | 71 | is: 'full-view', 72 | behaviors: [NeonAnimatableBehavior], 73 | 74 | properties: { 75 | 76 | sharedElements: {type: Object}, 77 | 78 | animationConfig: {type: Object} 79 | }, 80 | 81 | attached: function() { 82 | if (this.animationConfig) { 83 | return; 84 | } 85 | 86 | this.sharedElements = {'hero': this.$.main}; 87 | this.animationConfig = { 88 | 'entry': [ 89 | {name: 'fade-in-animation', node: this.$.button}, 90 | {name: 'hero-animation', id: 'hero', toPage: this} 91 | ], 92 | 93 | 'exit': [ 94 | {name: 'fade-out-animation', node: this.$.button}, 95 | { 96 | name: 'scale-down-animation', 97 | node: this.$.main, 98 | transformOrigin: '50% 50%', 99 | axis: 'y' 100 | } 101 | ] 102 | } 103 | }, 104 | 105 | _onClearButtonClick: function() { 106 | this.fire('close'); 107 | } 108 | }); 109 | -------------------------------------------------------------------------------- /demo/list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: list 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /demo/list/list-demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import '../../neon-animated-pages.js'; 14 | import '../../neon-animations.js'; 15 | import './list-view.js'; 16 | import './full-view.js'; 17 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 18 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 19 | Polymer({ 20 | _template: html` 21 | 29 | 30 | 31 | 32 | 33 | `, 34 | 35 | is: 'list-demo', 36 | 37 | properties: { 38 | 39 | fileData: { 40 | type: Array, 41 | value: function() { 42 | return [ 43 | {fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'}, 44 | {fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'}, 45 | {fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'}, 46 | {fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'}, 47 | {fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'}, 48 | {fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'}, 49 | {fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'}, 50 | {fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'}, 51 | {fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'}, 52 | {fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'}, 53 | {fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'}, 54 | {fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'}, 55 | {fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'}, 56 | {fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'}, 57 | {fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'}, 58 | {fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'}, 59 | {fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'}, 60 | {fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'}, 61 | {fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'}, 62 | {fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'}, 63 | {fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'}, 64 | {fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'}, 65 | {fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'}, 66 | {fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'}, 67 | {fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'}, 68 | {fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'}, 69 | {fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'}, 70 | {fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'}, 71 | {fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'}, 72 | {fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'}, 73 | {fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'}, 74 | {fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'}, 75 | {fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'}, 76 | {fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'}, 77 | {fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'}, 78 | {fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'}, 79 | {fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'}, 80 | {fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'}, 81 | {fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'}, 82 | {fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'} 83 | ] 84 | } 85 | } 86 | }, 87 | 88 | _onItemClick: function() { 89 | this.$.pages.selected = 1; 90 | }, 91 | 92 | _onClose: function() { 93 | this.$.pages.selected = 0; 94 | } 95 | }); 96 | -------------------------------------------------------------------------------- /demo/list/list-view.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-icons/iron-icons.js'; 13 | import '@polymer/iron-icon/iron-icon.js'; 14 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 15 | import '@polymer/paper-icon-button/paper-icon-button.js'; 16 | import '@polymer/paper-item/paper-item.js'; 17 | import '@polymer/paper-item/paper-item-body.js'; 18 | import '@polymer/app-layout/app-toolbar/app-toolbar.js'; 19 | import '@polymer/paper-styles/color.js'; 20 | 21 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 22 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 23 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 24 | 25 | import {NeonAnimatableBehavior} from '../../neon-animatable-behavior.js'; 26 | 27 | Polymer({ 28 | _template: html` 29 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 65 | 66 |
67 | `, 68 | 69 | is: 'list-view', 70 | behaviors: [NeonAnimatableBehavior], 71 | listeners: {'click': '_onClick'}, 72 | 73 | properties: { 74 | 75 | data: { 76 | type: Array, 77 | value: function() { 78 | return []; 79 | } 80 | }, 81 | 82 | animationConfig: {type: Object} 83 | }, 84 | 85 | attached: function() { 86 | if (this.animationConfig) { 87 | return; 88 | } 89 | 90 | this.animationConfig = { 91 | 'entry': [{name: 'fade-in-animation', node: this.$.button}], 92 | 93 | 'exit': [ 94 | {name: 'fade-out-animation', node: this.$.button}, 95 | {name: 'hero-animation', id: 'hero', fromPage: this} 96 | ] 97 | }; 98 | }, 99 | 100 | _onClick: function(event) { 101 | var target = dom(event).rootTarget; 102 | 103 | // configure the page animation 104 | this.sharedElements = { 105 | 'hero': target, 106 | }; 107 | 108 | this.fire('item-click', { 109 | item: target, 110 | }); 111 | } 112 | }); 113 | -------------------------------------------------------------------------------- /demo/load/animated-grid.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | import '@polymer/paper-styles/typography.js'; 14 | import '@polymer/paper-styles/color.js'; 15 | import '../shared-styles.js'; 16 | 17 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 18 | import {dom, flush} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 19 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 20 | 21 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 22 | 23 | Polymer({ 24 | _template: html` 25 | 78 | 79 | 84 | `, 85 | 86 | is: 'animated-grid', 87 | behaviors: [NeonSharedElementAnimatableBehavior], 88 | 89 | properties: { 90 | 91 | config: { 92 | type: Array, 93 | value: function() { 94 | return [ 95 | {value: 1, color: 'blue'}, 96 | {value: 2, color: 'red'}, 97 | {value: 3, color: 'blue'}, 98 | {value: 4, color: 'green'}, 99 | {value: 5, color: 'yellow'}, 100 | {value: 6, color: 'blue'}, 101 | {value: 7, color: 'red'}, 102 | {value: 8, color: 'green'}, 103 | {value: 9, color: 'yellow'}, 104 | {value: 10, color: 'red'} 105 | ] 106 | } 107 | }, 108 | 109 | animationConfig: { 110 | type: Object, 111 | value: function() { 112 | return { 113 | 'entry': [{ 114 | name: 'cascaded-animation', 115 | animation: 'transform-animation', 116 | transformFrom: 'translateY(100%)', 117 | transformTo: 'none', 118 | timing: {delay: 50} 119 | }] 120 | } 121 | } 122 | } 123 | 124 | }, 125 | 126 | attached: function() { 127 | flush(); 128 | var nodeList = dom(this.root).querySelectorAll('.tile'); 129 | this.animationConfig['entry'][0].nodes = [...nodeList]; 130 | }, 131 | 132 | _computeTileClass: function(color) { 133 | return 'tile ' + color + '-300'; 134 | } 135 | }); 136 | -------------------------------------------------------------------------------- /demo/load/full-page.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | import '@polymer/paper-styles/shadow.js'; 14 | import './animated-grid.js'; 15 | 16 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 17 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 18 | 19 | import {NeonAnimatableBehavior} from '../../neon-animatable-behavior.js'; 20 | import {NeonAnimationRunnerBehavior} from '../../neon-animation-runner-behavior.js'; 21 | 22 | Polymer({ 23 | _template: html` 24 | 43 | 44 |
45 | 46 | `, 47 | 48 | is: 'full-page', 49 | 50 | behaviors: [NeonAnimatableBehavior, NeonAnimationRunnerBehavior], 51 | 52 | properties: { 53 | 54 | animationConfig: {type: Object} 55 | }, 56 | 57 | attached: function() { 58 | this.animationConfig = this.animationConfig || { 59 | 'entry': [ 60 | { 61 | name: 'slide-from-top-animation', 62 | node: this.$.toolbar, 63 | }, 64 | { 65 | animatable: this.$.grid, 66 | type: 'entry', 67 | } 68 | ] 69 | }; 70 | }, 71 | 72 | show: function() { 73 | this.style.visibility = 'visible'; 74 | this.playAnimation('entry'); 75 | } 76 | }); 77 | -------------------------------------------------------------------------------- /demo/load/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: load 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /demo/shared-styles.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 12 | 13 | const template = html` 14 | 15 | 50 | 51 | `; 52 | 53 | document.head.appendChild(template.content); -------------------------------------------------------------------------------- /demo/tiles/circles-page.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 13 | 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 16 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 17 | 18 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 19 | 20 | Polymer({ 21 | _template: html` 22 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 | `, 46 | 47 | is: 'circles-page', 48 | behaviors: [NeonSharedElementAnimatableBehavior], 49 | 50 | properties: { 51 | 52 | animationConfig: {type: Object} 53 | }, 54 | 55 | listeners: {'click': '_onClick'}, 56 | 57 | attached: function() { 58 | if (this.animationConfig) { 59 | return; 60 | } 61 | 62 | var circles = dom(this.root).querySelectorAll('.circle'); 63 | var circlesArray = Array.from(circles); 64 | this.animationConfig = { 65 | 'entry': [{ 66 | name: 'cascaded-animation', 67 | animation: 'scale-up-animation', 68 | nodes: circlesArray, 69 | }], 70 | 71 | 'exit': [ 72 | { 73 | name: 'hero-animation', 74 | id: 'hero', 75 | fromPage: this, 76 | }, 77 | { 78 | name: 'cascaded-animation', 79 | animation: 'scale-down-animation', 80 | } 81 | ] 82 | }; 83 | }, 84 | 85 | _onClick: function(event) { 86 | var target = dom(event).rootTarget; 87 | 88 | if (target.classList.contains('circle')) { 89 | // configure the page animation 90 | this.sharedElements = {'hero': target}; 91 | 92 | var nodesToScale = []; 93 | var circles = dom(this.root).querySelectorAll('.circle'); 94 | 95 | for (var node, index = 0; node = circles[index]; index++) { 96 | if (node !== event.target) { 97 | nodesToScale.push(node); 98 | } 99 | } 100 | 101 | this.animationConfig['exit'][1].nodes = nodesToScale; 102 | this.fire('circle-click'); 103 | } 104 | } 105 | }); 106 | -------------------------------------------------------------------------------- /demo/tiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | neon-animated-pages demo: tiles 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 | 40 | 41 | 42 | 50 | 51 | 52 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /demo/tiles/squares-page.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 14 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonSharedElementAnimatableBehavior} from '../../neon-shared-element-animatable-behavior.js'; 18 | 19 | Polymer({ 20 | _template: html` 21 | 40 | 41 | 42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 | `, 50 | 51 | is: 'squares-page', 52 | behaviors: [NeonSharedElementAnimatableBehavior], 53 | 54 | properties: { 55 | 56 | sharedElements: {type: Object}, 57 | 58 | animationConfig: {type: Object} 59 | }, 60 | 61 | attached: function() { 62 | if (this.animationConfig) { 63 | return; 64 | } 65 | 66 | this.sharedElements = {'hero': this.$.header}; 67 | var squares = dom(this.root).querySelectorAll('.square'); 68 | var squaresArray = Array.from(squares); 69 | this.animationConfig = { 70 | 'entry': [ 71 | {name: 'hero-animation', id: 'hero', toPage: this}, 72 | { 73 | name: 'cascaded-animation', 74 | animation: 'transform-animation', 75 | transformFrom: 'translateY(100%)', 76 | nodes: squaresArray, 77 | } 78 | ], 79 | 80 | 'exit': [ 81 | {name: 'slide-up-animation', node: this.$.header}, 82 | { 83 | name: 'cascaded-animation', 84 | animation: 'transform-animation', 85 | transformTo: 'translateY(60vh)', 86 | nodes: squaresArray, 87 | } 88 | ] 89 | }; 90 | } 91 | }); 92 | -------------------------------------------------------------------------------- /formatconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "style": { 3 | "ReflowComments": false 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /gen-tsd.json: -------------------------------------------------------------------------------- 1 | { 2 | "removeReferences": [ 3 | "../web-animations-js/web-animations-next-lite.min.d.ts" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: neon-animation 3 | summary: "A short guide to neon-animation and neon-animated-pages" 4 | elements: ['neon-animation','neon-animated-pages'] 5 | --- 6 | 7 | # neon-animation 8 | 9 | `neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/). 10 | 11 | *Warning: The API may change.* 12 | 13 | * [A basic animatable element](#basic) 14 | * [Animation configuration](#configuration) 15 | * [Animation types](#configuration-types) 16 | * [Configuration properties](#configuration-properties) 17 | * [Using multiple animations](#configuration-multiple) 18 | * [Running animations encapsulated in children nodes](#configuration-encapsulation) 19 | * [Page transitions](#page-transitions) 20 | * [Shared element animations](#shared-element) 21 | * [Declarative page transitions](#declarative-page) 22 | * [Included animations](#animations) 23 | * [Demos](#demos) 24 | 25 | 26 | ## A basic animatable element 27 | 28 | Elements that can be animated should implement the `NeonAnimatableBehavior` behavior, or `NeonAnimationRunnerBehavior` if they're also responsible for running an animation. 29 | 30 | ```js 31 | Polymer({ 32 | is: 'my-animatable', 33 | behaviors: [ 34 | NeonAnimationRunnerBehavior 35 | ], 36 | properties: { 37 | animationConfig: { 38 | value: function() { 39 | return { 40 | // provided by neon-animation/animations/scale-down-animation.js 41 | name: 'scale-down-animation', 42 | node: this 43 | } 44 | } 45 | } 46 | }, 47 | listeners: { 48 | // this event is fired when the animation finishes 49 | 'neon-animation-finish': '_onNeonAnimationFinish' 50 | }, 51 | animate: function() { 52 | // run scale-down-animation 53 | this.playAnimation(); 54 | }, 55 | _onNeonAnimationFinish: function() { 56 | console.log('animation done!'); 57 | } 58 | }); 59 | ``` 60 | 61 | [Live demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/doc/index.html) 62 | 63 | 64 | ## Animation configuration 65 | 66 | 67 | ### Animation types 68 | 69 | An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration. 70 | 71 | ```js 72 | Polymer({ 73 | is: 'my-dialog', 74 | behaviors: [ 75 | NeonAnimationRunnerBehavior 76 | ], 77 | properties: { 78 | opened: { 79 | type: Boolean 80 | }, 81 | animationConfig: { 82 | value: function() { 83 | return { 84 | 'entry': { 85 | // provided by neon-animation/animations/scale-up-animation.js 86 | name: 'scale-up-animation', 87 | node: this 88 | }, 89 | 'exit': { 90 | // provided by neon-animation-animations/fade-out-animation.js 91 | name: 'fade-out-animation', 92 | node: this 93 | } 94 | } 95 | } 96 | } 97 | }, 98 | listeners: { 99 | 'neon-animation-finish': '_onNeonAnimationFinish' 100 | }, 101 | show: function() { 102 | this.opened = true; 103 | this.style.display = 'inline-block'; 104 | // run scale-up-animation 105 | this.playAnimation('entry'); 106 | }, 107 | hide: function() { 108 | this.opened = false; 109 | // run fade-out-animation 110 | this.playAnimation('exit'); 111 | }, 112 | _onNeonAnimationFinish: function() { 113 | if (!this.opened) { 114 | this.style.display = 'none'; 115 | } 116 | } 117 | }); 118 | ``` 119 | 120 | [Live demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/doc/index.html) 121 | 122 | You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations: 123 | 124 | ```js 125 | properties: { 126 | entryAnimation: { 127 | value: 'scale-up-animation' 128 | }, 129 | exitAnimation: { 130 | value: 'fade-out-animation' 131 | } 132 | } 133 | ``` 134 | 135 | 136 | ### Configuration properties 137 | 138 | You can pass additional parameters to configure an animation in the animation configuration object. 139 | All animations should accept the following properties: 140 | 141 | * `name`: The name of an animation, ie. an element implementing `NeonAnimationBehavior`. 142 | * `node`: The target node to apply the animation to. Defaults to `this`. 143 | * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The 144 | properties include the following: 145 | * `duration`: The duration of the animation in milliseconds. 146 | * `delay`: The delay before the start of the animation in milliseconds. 147 | * `easing`: A timing function for the animation. Matches the CSS timing function values. 148 | 149 | Animations may define additional configuration properties and they are listed in their documentation. 150 | 151 | 152 | ### Using multiple animations 153 | 154 | Set the animation configuration to an array to combine animations, like this: 155 | 156 | ```js 157 | animationConfig: { 158 | value: function() { 159 | return { 160 | // fade-in-animation is run with a 50ms delay from slide-down-animation 161 | 'entry': [{ 162 | name: 'slide-down-animation', 163 | node: this 164 | }, { 165 | name: 'fade-in-animation', 166 | node: this, 167 | timing: {delay: 50} 168 | }] 169 | } 170 | } 171 | } 172 | ``` 173 | 174 | 175 | ### Running animations encapsulated in children nodes 176 | 177 | You can include animations in the configuration that are encapsulated in a child element that implement `NeonAnimatableBehavior` with the `animatable` property. 178 | 179 | ```js 180 | animationConfig: { 181 | value: function() { 182 | return { 183 | // run fade-in-animation on this, and the entry animation on this.$.myAnimatable 184 | 'entry': [ 185 | {name: 'fade-in-animation', node: this}, 186 | {animatable: this.$.myAnimatable, type: 'entry'} 187 | ] 188 | } 189 | } 190 | } 191 | ``` 192 | 193 | 194 | ## Page transitions 195 | 196 | The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `IronSelectableBehavior` behavior. Each child node should implement `NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page. 197 | 198 | 199 | ### Shared element animations 200 | 201 | Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation. 202 | 203 | In the incoming page: 204 | 205 | ```js 206 | properties: { 207 | animationConfig: { 208 | value: function() { 209 | return { 210 | // the incoming page defines the 'entry' animation 211 | 'entry': { 212 | name: 'hero-animation', 213 | id: 'hero', 214 | toPage: this 215 | } 216 | } 217 | } 218 | }, 219 | sharedElements: { 220 | value: function() { 221 | return { 222 | 'hero': this.$.hero 223 | } 224 | } 225 | } 226 | } 227 | ``` 228 | 229 | In the outgoing page: 230 | 231 | ```js 232 | properties: { 233 | animationConfig: { 234 | value: function() { 235 | return { 236 | // the outgoing page defines the 'exit' animation 237 | 'exit': { 238 | name: 'hero-animation', 239 | id: 'hero', 240 | fromPage: this 241 | } 242 | } 243 | } 244 | }, 245 | sharedElements: { 246 | value: function() { 247 | return { 248 | 'hero': this.$.otherHero 249 | } 250 | } 251 | } 252 | } 253 | ``` 254 | 255 | 256 | ### Declarative page transitions 257 | 258 | For convenience, if you define the `entry-animation` and `exit-animation` attributes on ``, those animations will apply for all page transitions. 259 | 260 | For example: 261 | 262 | ```js 263 | 264 | 1 265 | 2 266 | 3 267 | 4 268 | 5 269 | 270 | ``` 271 | 272 | The new page will slide in from the right, and the old page slide away to the left. 273 | 274 | 275 | ## Included animations 276 | 277 | Single element animations: 278 | 279 | * `fade-in-animation` Animates opacity from `0` to `1`; 280 | * `fade-out-animation` Animates opacity from `1` to `0`; 281 | * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`; 282 | * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`; 283 | * `slide-down-animation` Animates transform from `none` to `translateY(100%)`; 284 | * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`; 285 | * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`; 286 | * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`; 287 | * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`; 288 | * `slide-right-animation` Animates transform from `none` to `translateX(100%)`; 289 | * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`; 290 | * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`; 291 | * `transform-animation` Animates a custom transform. 292 | 293 | Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties. 294 | 295 | Shared element animations 296 | 297 | * `hero-animation` Animates an element such that it looks like it scales and transforms from another element. 298 | * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element. 299 | 300 | Group animations 301 | * `cascaded-animation` Applys an animation to an array of elements with a delay between each. 302 | 303 | 304 | ## Demos 305 | 306 | * [Grid to full screen](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/grid/index.html) 307 | * [Animation on load](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/load/index.html) 308 | * [List item to detail](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/list/index.html) (For narrow width) 309 | * [Dots to squares](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/tiles/index.html) 310 | * [Declarative](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/declarative/index.html) 311 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "neon-animation-runner-behavior.html": { 4 | "convertedUrl": "neon-animation-runner-behavior.js", 5 | "exports": { 6 | "Polymer.NeonAnimationRunnerBehaviorImpl": "NeonAnimationRunnerBehaviorImpl", 7 | "Polymer.NeonAnimationRunnerBehavior": "NeonAnimationRunnerBehavior" 8 | } 9 | }, 10 | "neon-animatable-behavior.html": { 11 | "convertedUrl": "neon-animatable-behavior.js", 12 | "exports": { 13 | "Polymer.NeonAnimatableBehavior": "NeonAnimatableBehavior" 14 | } 15 | }, 16 | "neon-animation-behavior.html": { 17 | "convertedUrl": "neon-animation-behavior.js", 18 | "exports": { 19 | "Polymer.NeonAnimationBehavior": "NeonAnimationBehavior" 20 | } 21 | }, 22 | "neon-animated-pages.html": { 23 | "convertedUrl": "neon-animated-pages.js", 24 | "exports": {} 25 | }, 26 | "neon-animatable.html": { 27 | "convertedUrl": "neon-animatable.js", 28 | "exports": {} 29 | }, 30 | "neon-animations.html": { 31 | "convertedUrl": "neon-animations.js", 32 | "exports": {} 33 | }, 34 | "animations/cascaded-animation.html": { 35 | "convertedUrl": "animations/cascaded-animation.js", 36 | "exports": {} 37 | }, 38 | "animations/fade-in-animation.html": { 39 | "convertedUrl": "animations/fade-in-animation.js", 40 | "exports": {} 41 | }, 42 | "animations/fade-out-animation.html": { 43 | "convertedUrl": "animations/fade-out-animation.js", 44 | "exports": {} 45 | }, 46 | "animations/hero-animation.html": { 47 | "convertedUrl": "animations/hero-animation.js", 48 | "exports": {} 49 | }, 50 | "neon-shared-element-animation-behavior.html": { 51 | "convertedUrl": "neon-shared-element-animation-behavior.js", 52 | "exports": { 53 | "Polymer.NeonSharedElementAnimationBehaviorImpl": "NeonSharedElementAnimationBehaviorImpl", 54 | "Polymer.NeonSharedElementAnimationBehavior": "NeonSharedElementAnimationBehavior" 55 | } 56 | }, 57 | "animations/opaque-animation.html": { 58 | "convertedUrl": "animations/opaque-animation.js", 59 | "exports": {} 60 | }, 61 | "animations/ripple-animation.html": { 62 | "convertedUrl": "animations/ripple-animation.js", 63 | "exports": {} 64 | }, 65 | "animations/reverse-ripple-animation.html": { 66 | "convertedUrl": "animations/reverse-ripple-animation.js", 67 | "exports": {} 68 | }, 69 | "animations/scale-down-animation.html": { 70 | "convertedUrl": "animations/scale-down-animation.js", 71 | "exports": {} 72 | }, 73 | "animations/scale-up-animation.html": { 74 | "convertedUrl": "animations/scale-up-animation.js", 75 | "exports": {} 76 | }, 77 | "animations/slide-from-left-animation.html": { 78 | "convertedUrl": "animations/slide-from-left-animation.js", 79 | "exports": {} 80 | }, 81 | "animations/slide-from-right-animation.html": { 82 | "convertedUrl": "animations/slide-from-right-animation.js", 83 | "exports": {} 84 | }, 85 | "animations/slide-from-top-animation.html": { 86 | "convertedUrl": "animations/slide-from-top-animation.js", 87 | "exports": {} 88 | }, 89 | "animations/slide-from-bottom-animation.html": { 90 | "convertedUrl": "animations/slide-from-bottom-animation.js", 91 | "exports": {} 92 | }, 93 | "animations/slide-left-animation.html": { 94 | "convertedUrl": "animations/slide-left-animation.js", 95 | "exports": {} 96 | }, 97 | "animations/slide-right-animation.html": { 98 | "convertedUrl": "animations/slide-right-animation.js", 99 | "exports": {} 100 | }, 101 | "animations/slide-up-animation.html": { 102 | "convertedUrl": "animations/slide-up-animation.js", 103 | "exports": {} 104 | }, 105 | "animations/slide-down-animation.html": { 106 | "convertedUrl": "animations/slide-down-animation.js", 107 | "exports": {} 108 | }, 109 | "animations/transform-animation.html": { 110 | "convertedUrl": "animations/transform-animation.js", 111 | "exports": {} 112 | }, 113 | "neon-shared-element-animatable-behavior.html": { 114 | "convertedUrl": "neon-shared-element-animatable-behavior.js", 115 | "exports": { 116 | "Polymer.NeonSharedElementAnimatableBehaviorImpl": "NeonSharedElementAnimatableBehaviorImpl", 117 | "Polymer.NeonSharedElementAnimatableBehavior": "NeonSharedElementAnimatableBehavior" 118 | } 119 | }, 120 | "index.html": { 121 | "convertedUrl": "index.html", 122 | "exports": {} 123 | }, 124 | "neon-animation.html": { 125 | "convertedUrl": "neon-animation.html", 126 | "exports": {} 127 | }, 128 | "demo/index.html": { 129 | "convertedUrl": "demo/index.html", 130 | "exports": {} 131 | }, 132 | "demo/card/index.html": { 133 | "convertedUrl": "demo/card/index.html", 134 | "exports": {} 135 | }, 136 | "demo/card/x-card.html": { 137 | "convertedUrl": "demo/card/x-card.js", 138 | "exports": {} 139 | }, 140 | "demo/card/x-cards-list.html": { 141 | "convertedUrl": "demo/card/x-cards-list.js", 142 | "exports": {} 143 | }, 144 | "demo/declarative/index.html": { 145 | "convertedUrl": "demo/declarative/index.html", 146 | "exports": {} 147 | }, 148 | "demo/doc/index.html": { 149 | "convertedUrl": "demo/doc/index.html", 150 | "exports": {} 151 | }, 152 | "demo/doc/my-animatable.html": { 153 | "convertedUrl": "demo/doc/my-animatable.js", 154 | "exports": {} 155 | }, 156 | "demo/doc/my-dialog.html": { 157 | "convertedUrl": "demo/doc/my-dialog.js", 158 | "exports": {} 159 | }, 160 | "demo/dropdown/index.html": { 161 | "convertedUrl": "demo/dropdown/index.html", 162 | "exports": {} 163 | }, 164 | "demo/dropdown/animated-dropdown.html": { 165 | "convertedUrl": "demo/dropdown/animated-dropdown.js", 166 | "exports": {} 167 | }, 168 | "demo/grid/index.html": { 169 | "convertedUrl": "demo/grid/index.html", 170 | "exports": {} 171 | }, 172 | "demo/grid/animated-grid.html": { 173 | "convertedUrl": "demo/grid/animated-grid.js", 174 | "exports": {} 175 | }, 176 | "demo/shared-styles.html": { 177 | "convertedUrl": "demo/shared-styles.js", 178 | "exports": {} 179 | }, 180 | "demo/grid/fullsize-page-with-card.html": { 181 | "convertedUrl": "demo/grid/fullsize-page-with-card.js", 182 | "exports": {} 183 | }, 184 | "demo/list/index.html": { 185 | "convertedUrl": "demo/list/index.html", 186 | "exports": {} 187 | }, 188 | "demo/list/list-demo.html": { 189 | "convertedUrl": "demo/list/list-demo.js", 190 | "exports": {} 191 | }, 192 | "demo/list/list-view.html": { 193 | "convertedUrl": "demo/list/list-view.js", 194 | "exports": {} 195 | }, 196 | "demo/list/full-view.html": { 197 | "convertedUrl": "demo/list/full-view.js", 198 | "exports": {} 199 | }, 200 | "demo/load/index.html": { 201 | "convertedUrl": "demo/load/index.html", 202 | "exports": {} 203 | }, 204 | "demo/load/full-page.html": { 205 | "convertedUrl": "demo/load/full-page.js", 206 | "exports": {} 207 | }, 208 | "demo/load/animated-grid.html": { 209 | "convertedUrl": "demo/load/animated-grid.js", 210 | "exports": {} 211 | }, 212 | "demo/tiles/index.html": { 213 | "convertedUrl": "demo/tiles/index.html", 214 | "exports": {} 215 | }, 216 | "demo/tiles/circles-page.html": { 217 | "convertedUrl": "demo/tiles/circles-page.js", 218 | "exports": {} 219 | }, 220 | "demo/tiles/squares-page.html": { 221 | "convertedUrl": "demo/tiles/squares-page.js", 222 | "exports": {} 223 | }, 224 | "test/index.html": { 225 | "convertedUrl": "test/index.html", 226 | "exports": {} 227 | }, 228 | "test/neon-animated-pages-descendant-selection.html": { 229 | "convertedUrl": "test/neon-animated-pages-descendant-selection.html", 230 | "exports": {} 231 | }, 232 | "test/neon-animated-pages-lazy.html": { 233 | "convertedUrl": "test/neon-animated-pages-lazy.html", 234 | "exports": {} 235 | }, 236 | "test/test-resizable-pages.html": { 237 | "convertedUrl": "test/test-resizable-pages.js", 238 | "exports": {} 239 | }, 240 | "test/neon-animated-pages.html": { 241 | "convertedUrl": "test/neon-animated-pages.html", 242 | "exports": {} 243 | } 244 | } 245 | } 246 | -------------------------------------------------------------------------------- /neon-animatable-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | /** 14 | * `NeonAnimatableBehavior` is implemented by elements containing 15 | * animations for use with elements implementing 16 | * `NeonAnimationRunnerBehavior`. 17 | * @polymerBehavior 18 | */ 19 | export const NeonAnimatableBehavior = { 20 | 21 | properties: { 22 | 23 | /** 24 | * Animation configuration. See README for more info. 25 | */ 26 | animationConfig: {type: Object}, 27 | 28 | /** 29 | * Convenience property for setting an 'entry' animation. Do not set 30 | * `animationConfig.entry` manually if using this. The animated node is set 31 | * to `this` if using this property. 32 | */ 33 | entryAnimation: { 34 | observer: '_entryAnimationChanged', 35 | type: String, 36 | }, 37 | 38 | /** 39 | * Convenience property for setting an 'exit' animation. Do not set 40 | * `animationConfig.exit` manually if using this. The animated node is set 41 | * to `this` if using this property. 42 | */ 43 | exitAnimation: { 44 | observer: '_exitAnimationChanged', 45 | type: String, 46 | }, 47 | 48 | }, 49 | 50 | _entryAnimationChanged: function() { 51 | this.animationConfig = this.animationConfig || {}; 52 | this.animationConfig['entry'] = [{name: this.entryAnimation, node: this}]; 53 | }, 54 | 55 | _exitAnimationChanged: function() { 56 | this.animationConfig = this.animationConfig || {}; 57 | this.animationConfig['exit'] = [{name: this.exitAnimation, node: this}]; 58 | }, 59 | 60 | _copyProperties: function(config1, config2) { 61 | // shallowly copy properties from config2 to config1 62 | for (var property in config2) { 63 | config1[property] = config2[property]; 64 | } 65 | }, 66 | 67 | _cloneConfig: function(config) { 68 | var clone = {isClone: true}; 69 | this._copyProperties(clone, config); 70 | return clone; 71 | }, 72 | 73 | _getAnimationConfigRecursive: function(type, map, allConfigs) { 74 | if (!this.animationConfig) { 75 | return; 76 | } 77 | 78 | if (this.animationConfig.value && 79 | typeof this.animationConfig.value === 'function') { 80 | this._warn(this._logf( 81 | 'playAnimation', 82 | 'Please put \'animationConfig\' inside of your components \'properties\' object instead of outside of it.')); 83 | return; 84 | } 85 | 86 | // type is optional 87 | var thisConfig; 88 | if (type) { 89 | thisConfig = this.animationConfig[type]; 90 | } else { 91 | thisConfig = this.animationConfig; 92 | } 93 | 94 | if (!Array.isArray(thisConfig)) { 95 | thisConfig = [thisConfig]; 96 | } 97 | 98 | // iterate animations and recurse to process configurations from child nodes 99 | if (thisConfig) { 100 | for (var config, index = 0; config = thisConfig[index]; index++) { 101 | if (config.animatable) { 102 | config.animatable._getAnimationConfigRecursive( 103 | config.type || type, map, allConfigs); 104 | } else { 105 | if (config.id) { 106 | var cachedConfig = map[config.id]; 107 | if (cachedConfig) { 108 | // merge configurations with the same id, making a clone lazily 109 | if (!cachedConfig.isClone) { 110 | map[config.id] = this._cloneConfig(cachedConfig); 111 | cachedConfig = map[config.id]; 112 | } 113 | this._copyProperties(cachedConfig, config); 114 | } else { 115 | // put any configs with an id into a map 116 | map[config.id] = config; 117 | } 118 | } else { 119 | allConfigs.push(config); 120 | } 121 | } 122 | } 123 | } 124 | }, 125 | 126 | /** 127 | * An element implementing `NeonAnimationRunnerBehavior` calls this 128 | * method to configure an animation with an optional type. Elements 129 | * implementing `NeonAnimatableBehavior` should define the property 130 | * `animationConfig`, which is either a configuration object or a map of 131 | * animation type to array of configuration objects. 132 | */ 133 | getAnimationConfig: function(type) { 134 | var map = {}; 135 | var allConfigs = []; 136 | this._getAnimationConfigRecursive(type, map, allConfigs); 137 | // append the configurations saved in the map to the array 138 | for (var key in map) { 139 | allConfigs.push(map[key]); 140 | } 141 | return allConfigs; 142 | } 143 | 144 | }; 145 | -------------------------------------------------------------------------------- /neon-animatable.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 16 | 17 | import {NeonAnimatableBehavior} from './neon-animatable-behavior.js'; 18 | 19 | /** 20 | `` is a simple container element implementing 21 | `NeonAnimatableBehavior`. This is a convenience element for use with 22 | ``. 23 | 24 | ``` 25 | 28 | 1 29 | 2 30 | 31 | ``` 32 | */ 33 | Polymer({ 34 | /** @override */ 35 | _template: html` 36 | 41 | 42 | 43 | `, 44 | 45 | is: 'neon-animatable', 46 | behaviors: [NeonAnimatableBehavior, IronResizableBehavior] 47 | }); 48 | -------------------------------------------------------------------------------- /neon-animated-pages.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; 14 | import {IronSelectableBehavior} from '@polymer/iron-selector/iron-selectable.js'; 15 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 16 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 17 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 18 | 19 | import {NeonAnimationRunnerBehavior} from './neon-animation-runner-behavior.js'; 20 | 21 | /** 22 | Material design: [Meaningful 23 | transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html) 24 | 25 | `neon-animated-pages` manages a set of pages and runs an animation when 26 | switching between them. Its children pages should implement 27 | `NeonAnimatableBehavior` and define `entry` and `exit` animations to be 28 | run when switching to or switching out of the page. 29 | 30 | @element neon-animated-pages 31 | */ 32 | Polymer({ 33 | /** @override */ 34 | _template: html` 35 | 58 | 59 | 60 | `, 61 | 62 | is: 'neon-animated-pages', 63 | 64 | behaviors: [ 65 | IronResizableBehavior, 66 | IronSelectableBehavior, 67 | NeonAnimationRunnerBehavior 68 | ], 69 | 70 | properties: { 71 | 72 | activateEvent: {type: String, value: ''}, 73 | 74 | // if true, the initial page selection will also be animated according to 75 | // its animation config. 76 | animateInitialSelection: {type: Boolean, value: false} 77 | 78 | }, 79 | 80 | listeners: { 81 | 'iron-select': '_onIronSelect', 82 | 'neon-animation-finish': '_onNeonAnimationFinish' 83 | }, 84 | 85 | _onIronSelect: function(event) { 86 | var selectedPage = event.detail.item; 87 | 88 | // Only consider child elements. 89 | if (this.items.indexOf(selectedPage) < 0) { 90 | return; 91 | } 92 | 93 | var oldPage = this._valueToItem(this._prevSelected) || false; 94 | this._prevSelected = this.selected; 95 | 96 | // on initial load and if animateInitialSelection is negated, simply display 97 | // selectedPage. 98 | if (!oldPage && !this.animateInitialSelection) { 99 | this._completeSelectedChanged(); 100 | return; 101 | } 102 | 103 | this.animationConfig = []; 104 | 105 | // configure selectedPage animations. 106 | if (this.entryAnimation) { 107 | this.animationConfig.push( 108 | {name: this.entryAnimation, node: selectedPage}); 109 | } else { 110 | if (selectedPage.getAnimationConfig) { 111 | this.animationConfig.push({animatable: selectedPage, type: 'entry'}); 112 | } 113 | } 114 | 115 | // configure oldPage animations iff exists. 116 | if (oldPage) { 117 | // cancel the currently running animation if one is ongoing. 118 | if (oldPage.classList.contains('neon-animating')) { 119 | this._squelchNextFinishEvent = true; 120 | this.cancelAnimation(); 121 | this._completeSelectedChanged(); 122 | this._squelchNextFinishEvent = false; 123 | } 124 | 125 | // configure the animation. 126 | if (this.exitAnimation) { 127 | this.animationConfig.push({name: this.exitAnimation, node: oldPage}); 128 | } else { 129 | if (oldPage.getAnimationConfig) { 130 | this.animationConfig.push({animatable: oldPage, type: 'exit'}); 131 | } 132 | } 133 | 134 | // display the oldPage during the transition. 135 | oldPage.classList.add('neon-animating'); 136 | } 137 | 138 | // display the selectedPage during the transition. 139 | selectedPage.classList.add('neon-animating'); 140 | 141 | // actually run the animations. 142 | if (this.animationConfig.length >= 1) { 143 | // on first load, ensure we run animations only after element is attached. 144 | if (!this.isAttached) { 145 | this.async(function() { 146 | this.playAnimation(undefined, {fromPage: null, toPage: selectedPage}); 147 | }); 148 | 149 | } else { 150 | this.playAnimation( 151 | undefined, {fromPage: oldPage, toPage: selectedPage}); 152 | } 153 | 154 | } else { 155 | this._completeSelectedChanged(oldPage, selectedPage); 156 | } 157 | }, 158 | 159 | /** 160 | * @param {Object=} oldPage 161 | * @param {Object=} selectedPage 162 | */ 163 | _completeSelectedChanged: function(oldPage, selectedPage) { 164 | if (selectedPage) { 165 | selectedPage.classList.remove('neon-animating'); 166 | } 167 | if (oldPage) { 168 | oldPage.classList.remove('neon-animating'); 169 | } 170 | if (!selectedPage || !oldPage) { 171 | var nodes = dom(this.$.content).getDistributedNodes(); 172 | for (var node, index = 0; node = nodes[index]; index++) { 173 | node.classList && node.classList.remove('neon-animating'); 174 | } 175 | } 176 | this.async(this._notifyPageResize); 177 | }, 178 | 179 | _onNeonAnimationFinish: function(event) { 180 | if (this._squelchNextFinishEvent) { 181 | this._squelchNextFinishEvent = false; 182 | return; 183 | } 184 | this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); 185 | }, 186 | 187 | _notifyPageResize: function() { 188 | var selectedPage = this.selectedItem || this._valueToItem(this.selected); 189 | this.resizerShouldNotify = function(element) { 190 | return element == selectedPage; 191 | }; 192 | this.notifyResize(); 193 | } 194 | }) 195 | -------------------------------------------------------------------------------- /neon-animation-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | /** 14 | * Use `NeonAnimationBehavior` to implement an animation. 15 | * @polymerBehavior 16 | */ 17 | export const NeonAnimationBehavior = { 18 | 19 | properties: { 20 | 21 | /** 22 | * Defines the animation timing. 23 | */ 24 | animationTiming: { 25 | type: Object, 26 | value: function() { 27 | return { 28 | duration: 500, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'both' 29 | } 30 | } 31 | } 32 | 33 | }, 34 | 35 | /** 36 | * Can be used to determine that elements implement this behavior. 37 | */ 38 | isNeonAnimation: true, 39 | 40 | /** 41 | * Do any animation configuration here. 42 | */ 43 | // configure: function(config) { 44 | // }, 45 | 46 | /** @override */ 47 | created: function() { 48 | if (!document.body.animate) { 49 | console.warn( 50 | 'No web animations detected. This element will not' + 51 | ' function without a web animations polyfill.'); 52 | } 53 | }, 54 | 55 | /** 56 | * Returns the animation timing by mixing in properties from `config` to the 57 | * defaults defined by the animation. 58 | */ 59 | timingFromConfig: function(config) { 60 | if (config.timing) { 61 | for (var property in config.timing) { 62 | this.animationTiming[property] = config.timing[property]; 63 | } 64 | } 65 | return this.animationTiming; 66 | }, 67 | 68 | /** 69 | * Sets `transform` and `transformOrigin` properties along with the prefixed 70 | * versions. 71 | */ 72 | setPrefixedProperty: function(node, property, value) { 73 | var map = { 74 | 'transform': ['webkitTransform'], 75 | 'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin'] 76 | }; 77 | var prefixes = map[property]; 78 | for (var prefix, index = 0; prefix = prefixes[index]; index++) { 79 | node.style[prefix] = value; 80 | } 81 | node.style[property] = value; 82 | }, 83 | 84 | /** 85 | * Called when the animation finishes. 86 | */ 87 | complete: function(config) {} 88 | 89 | }; 90 | -------------------------------------------------------------------------------- /neon-animation-runner-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {NeonAnimatableBehavior} from './neon-animatable-behavior.js'; 14 | 15 | /** 16 | * `NeonAnimationRunnerBehavior` adds a method to run animations. 17 | * 18 | * @polymerBehavior NeonAnimationRunnerBehavior 19 | */ 20 | export const NeonAnimationRunnerBehaviorImpl = { 21 | 22 | _configureAnimations: function(configs) { 23 | var results = []; 24 | var resultsToPlay = []; 25 | 26 | if (configs.length > 0) { 27 | for (let config, index = 0; config = configs[index]; index++) { 28 | let neonAnimation = document.createElement(config.name); 29 | // is this element actually a neon animation? 30 | if (neonAnimation.isNeonAnimation) { 31 | let result = null; 32 | // Closure compiler does not work well with a try / catch here. 33 | // .configure needs to be explicitly defined 34 | if (!neonAnimation.configure) { 35 | /** 36 | * @param {Object} config 37 | * @return {AnimationEffectReadOnly} 38 | */ 39 | neonAnimation.configure = function(config) { 40 | return null; 41 | } 42 | } 43 | 44 | result = neonAnimation.configure(config); 45 | resultsToPlay.push({ 46 | result: result, 47 | config: config, 48 | neonAnimation: neonAnimation, 49 | }); 50 | } else { 51 | console.warn(this.is + ':', config.name, 'not found!'); 52 | } 53 | } 54 | } 55 | 56 | for (var i = 0; i < resultsToPlay.length; i++) { 57 | let result = resultsToPlay[i].result; 58 | let config = resultsToPlay[i].config; 59 | let neonAnimation = resultsToPlay[i].neonAnimation; 60 | // configuration or play could fail if polyfills aren't loaded 61 | try { 62 | // Check if we have an Effect rather than an Animation 63 | if (typeof result.cancel != 'function') { 64 | result = document.timeline.play(result); 65 | } 66 | } catch (e) { 67 | result = null; 68 | console.warn('Couldnt play', '(', config.name, ').', e); 69 | } 70 | 71 | if (result) { 72 | results.push({ 73 | neonAnimation: neonAnimation, 74 | config: config, 75 | animation: result, 76 | }); 77 | } 78 | } 79 | 80 | return results; 81 | }, 82 | 83 | _shouldComplete: function(activeEntries) { 84 | var finished = true; 85 | for (var i = 0; i < activeEntries.length; i++) { 86 | if (activeEntries[i].animation.playState != 'finished') { 87 | finished = false; 88 | break; 89 | } 90 | } 91 | return finished; 92 | }, 93 | 94 | _complete: function(activeEntries) { 95 | for (var i = 0; i < activeEntries.length; i++) { 96 | activeEntries[i].neonAnimation.complete(activeEntries[i].config); 97 | } 98 | for (var i = 0; i < activeEntries.length; i++) { 99 | activeEntries[i].animation.cancel(); 100 | } 101 | }, 102 | 103 | /** 104 | * Plays an animation with an optional `type`. 105 | * @param {string=} type 106 | * @param {!Object=} cookie 107 | */ 108 | playAnimation: function(type, cookie) { 109 | var configs = this.getAnimationConfig(type); 110 | if (!configs) { 111 | return; 112 | } 113 | this._active = this._active || {}; 114 | if (this._active[type]) { 115 | this._complete(this._active[type]); 116 | delete this._active[type]; 117 | } 118 | 119 | var activeEntries = this._configureAnimations(configs); 120 | 121 | if (activeEntries.length == 0) { 122 | this.fire('neon-animation-finish', cookie, {bubbles: false}); 123 | return; 124 | } 125 | 126 | this._active[type] = activeEntries; 127 | 128 | for (var i = 0; i < activeEntries.length; i++) { 129 | activeEntries[i].animation.onfinish = function() { 130 | if (this._shouldComplete(activeEntries)) { 131 | this._complete(activeEntries); 132 | delete this._active[type]; 133 | this.fire('neon-animation-finish', cookie, {bubbles: false}); 134 | } 135 | }.bind(this); 136 | } 137 | }, 138 | 139 | /** 140 | * Cancels the currently running animations. 141 | */ 142 | cancelAnimation: function() { 143 | for (var k in this._active) { 144 | var entries = this._active[k]; 145 | 146 | for (var j in entries) { 147 | if (entries[j].animation && entries[j].animation.cancel) { 148 | entries[j].animation.cancel(); 149 | } 150 | } 151 | } 152 | 153 | this._active = {}; 154 | } 155 | }; 156 | 157 | /** @polymerBehavior */ 158 | export const NeonAnimationRunnerBehavior = 159 | [NeonAnimatableBehavior, NeonAnimationRunnerBehaviorImpl]; 160 | -------------------------------------------------------------------------------- /neon-animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | 12 | import './neon-animatable-behavior.js'; 13 | import './neon-animated-pages.js'; 14 | import './neon-animatable.js'; 15 | import './neon-animation-behavior.js'; 16 | import './neon-animation-runner-behavior.js'; 17 | import './neon-animations.js'; 18 | import './neon-shared-element-animatable-behavior.js'; 19 | import './neon-shared-element-animation-behavior.js'; 20 | -------------------------------------------------------------------------------- /neon-animations.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import './animations/cascaded-animation.js'; 12 | import './animations/fade-in-animation.js'; 13 | import './animations/fade-out-animation.js'; 14 | import './animations/hero-animation.js'; 15 | import './animations/opaque-animation.js'; 16 | import './animations/ripple-animation.js'; 17 | import './animations/reverse-ripple-animation.js'; 18 | import './animations/scale-down-animation.js'; 19 | import './animations/scale-up-animation.js'; 20 | import './animations/slide-from-left-animation.js'; 21 | import './animations/slide-from-right-animation.js'; 22 | import './animations/slide-from-top-animation.js'; 23 | import './animations/slide-from-bottom-animation.js'; 24 | import './animations/slide-left-animation.js'; 25 | import './animations/slide-right-animation.js'; 26 | import './animations/slide-up-animation.js'; 27 | import './animations/slide-down-animation.js'; 28 | import './animations/transform-animation.js'; 29 | -------------------------------------------------------------------------------- /neon-shared-element-animatable-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {NeonAnimatableBehavior} from './neon-animatable-behavior.js'; 14 | 15 | /** 16 | * Use `NeonSharedElementAnimatableBehavior` to implement elements 17 | * containing shared element animations. 18 | * @polymerBehavior NeonSharedElementAnimatableBehavior 19 | */ 20 | export const NeonSharedElementAnimatableBehaviorImpl = { 21 | 22 | properties: { 23 | 24 | /** 25 | * A map of shared element id to node. 26 | */ 27 | sharedElements: {type: Object, value: {}} 28 | 29 | } 30 | 31 | }; 32 | 33 | /** @polymerBehavior */ 34 | export const NeonSharedElementAnimatableBehavior = 35 | [NeonAnimatableBehavior, NeonSharedElementAnimatableBehaviorImpl]; 36 | -------------------------------------------------------------------------------- /neon-shared-element-animation-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {NeonAnimationBehavior} from './neon-animation-behavior.js'; 14 | 15 | /** 16 | * Use `NeonSharedElementAnimationBehavior` to implement shared element 17 | * animations. 18 | * @polymerBehavior NeonSharedElementAnimationBehavior 19 | */ 20 | export const NeonSharedElementAnimationBehaviorImpl = { 21 | 22 | properties: { 23 | 24 | /** 25 | * Cached copy of shared elements. 26 | */ 27 | sharedElements: {type: Object} 28 | 29 | }, 30 | 31 | /** 32 | * Finds shared elements based on `config`. 33 | */ 34 | findSharedElements: function(config) { 35 | var fromPage = config.fromPage; 36 | var toPage = config.toPage; 37 | if (!fromPage || !toPage) { 38 | console.warn( 39 | this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!'); 40 | return null; 41 | }; 42 | 43 | if (!fromPage.sharedElements || !toPage.sharedElements) { 44 | console.warn( 45 | this.is + ':', 46 | 'sharedElements are undefined for', 47 | !fromPage.sharedElements ? fromPage : toPage); 48 | return null; 49 | }; 50 | 51 | var from = fromPage.sharedElements[config.id]; 52 | var to = toPage.sharedElements[config.id]; 53 | 54 | if (!from || !to) { 55 | console.warn( 56 | this.is + ':', 57 | 'sharedElement with id', 58 | config.id, 59 | 'not found in', 60 | !from ? fromPage : toPage); 61 | return null; 62 | } 63 | 64 | this.sharedElements = {from: from, to: to}; 65 | return this.sharedElements; 66 | } 67 | 68 | }; 69 | 70 | /** @polymerBehavior */ 71 | export const NeonSharedElementAnimationBehavior = 72 | [NeonAnimationBehavior, NeonSharedElementAnimationBehaviorImpl]; 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "neon-animation.js", 3 | "description": "A system for animating Polymer-based web components", 4 | "keywords": [ 5 | "web-components", 6 | "web-component", 7 | "polymer", 8 | "web-animations" 9 | ], 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/PolymerElements/neon-animation" 13 | }, 14 | "homepage": "https://github.com/PolymerElements/neon-animation", 15 | "name": "@polymer/neon-animation", 16 | "license": "BSD-3-Clause", 17 | "devDependencies": { 18 | "webmat": "^0.2.0", 19 | "@polymer/app-layout": "^3.0.0-pre.26", 20 | "@polymer/iron-flex-layout": "^3.0.0-pre.26", 21 | "@polymer/iron-icon": "^3.0.0-pre.26", 22 | "@polymer/iron-icons": "^3.0.0-pre.26", 23 | "@polymer/paper-icon-button": "^3.0.0-pre.26", 24 | "@polymer/paper-item": "^3.0.0-pre.26", 25 | "@polymer/paper-styles": "^3.0.0-pre.26", 26 | "web-animations-js": "^2.3.1", 27 | "wct-browser-legacy": "^1.0.1", 28 | "@webcomponents/webcomponentsjs": "^2.0.0", 29 | "@polymer/gen-typescript-declarations": "^1.5.1" 30 | }, 31 | "scripts": { 32 | "format": "webmat", 33 | "generate-types": "gen-typescript-declarations --deleteExisting --outDir . --verify", 34 | "prepare": "npm run generate-types" 35 | }, 36 | "version": "3.0.1", 37 | "author": "The Polymer Authors", 38 | "dependencies": { 39 | "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", 40 | "@polymer/iron-selector": "^3.0.0-pre.26", 41 | "@polymer/polymer": "^3.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | neon-animation tests 13 | 14 | 15 | 16 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /test/neon-animated-pages-descendant-selection.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 32 | 33 | 34 | 35 | 41 | 42 | 43 | 44 | 50 | 51 | 52 | 53 | 61 | 62 | 63 | 64 | 70 | 71 | 72 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /test/neon-animated-pages-lazy.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | neon-animated-pages tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 34 | 35 | 36 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /test/neon-animated-pages.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | neon-animated-pages tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 32 | 33 | 34 | 35 | 42 | 43 | 44 | 45 | 51 | 52 | 53 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /test/test-resizable-pages.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | 16 | import {NeonSharedElementAnimatableBehavior} from '../neon-shared-element-animatable-behavior.js'; 17 | 18 | Polymer({ 19 | is: 'a-resizable-page', 20 | 21 | behaviors: [NeonSharedElementAnimatableBehavior, IronResizableBehavior] 22 | }); 23 | 24 | Polymer({ 25 | is: 'b-resizable-page', 26 | 27 | behaviors: [NeonSharedElementAnimatableBehavior, IronResizableBehavior] 28 | }); 29 | 30 | Polymer({ 31 | is: 'c-resizable-page', 32 | 33 | behaviors: [NeonSharedElementAnimatableBehavior, IronResizableBehavior] 34 | }); 35 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "local": { 4 | "browserOptions": { 5 | "chrome": [ 6 | "no-sandbox", 7 | "headless", 8 | "disable-gpu" 9 | ], 10 | "firefox": [ 11 | "-headless" 12 | ] 13 | } 14 | } 15 | } 16 | } --------------------------------------------------------------------------------