{"_id":"@polymer/neon-animation","_rev":"49-2b360563faf14e5758d9a092bdee02a9","name":"@polymer/neon-animation","dist-tags":{"preview":"1.2.4-pre.3","next":"3.0.0-pre.20","latest":"3.0.1"},"versions":{"0.0.1":{"name":"@polymer/neon-animation","version":"0.0.1","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@0.0.1","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation#readme","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"74c88edcd803177fddb167e94c2499538e23aff0","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-0.0.1.tgz","integrity":"sha512-UZn0l9giQxL31bkNG5w6UPRoWu+FnPdm12n1ripDRmWZkzAl+gFMZC3iEOSBrMP3IHSpE3o2OUAwUASa+Tzmeg==","signatures":[{"sig":"MEUCIHWLFU8OojLfjC+qrGM8EKZ70ipi4SvzUN+O4j5DXZgiAiEAqzzFoC2FwfNjHVg4QM0ymqaHS/WqbxEh+GzaFpmde/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"74c88edcd803177fddb167e94c2499538e23aff0","gitHead":"ccf32b947a98fc1aa28fc49c025448e9a9180283","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.3.6","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"5.0.0","dependencies":{"@polymer/polymer":"^1.2.5-npm-test.2","web-animations-js":"2.1.3","@polymer/iron-meta":"^0.0.1","@polymer/iron-selector":"^0.0.1","@polymer/iron-resizable-behavior":"^0.0.1"},"devDependencies":{"webcomponents.js":"^0.7.0","@polymer/iron-icon":"^0.0.1","@polymer/iron-icons":"^0.0.1","@polymer/paper-item":"^0.0.1","web-component-tester":"^4.0.0","@polymer/paper-styles":"^0.0.1","@polymer/test-fixture":"^0.0.1","@polymer/paper-toolbar":"^0.0.1","@polymer/iron-flex-layout":"^0.0.1","@polymer/paper-icon-button":"^0.0.1","@polymer/iron-component-page":"^0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-0.0.1.tgz_1454388320517_0.4787457019556314","host":"packages-5-east.internal.npmjs.com"}},"0.0.3":{"name":"@polymer/neon-animation","version":"0.0.3","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@0.0.3","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation#readme","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"93e9eebcdf023c7b42d9a7d7f41fb1934b500b22","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-0.0.3.tgz","integrity":"sha512-f2QLDujUe1SBgjyFWhZLl7zdR2lH+pfhYXgJUANorvsFTl11vSVMow/BBVW+2gfs/hcVN6mh5xcTwZW8Ry7kOg==","signatures":[{"sig":"MEUCIEHTQJBuvGurPUfj0HSYLwWT68pUn9sxaSUau8wWLeBSAiEA9tgdcUwK/j3NZ0Mf1k47QWubESjeWlexzSxq39HyR18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"93e9eebcdf023c7b42d9a7d7f41fb1934b500b22","gitHead":"d79ee7ac3100c41cd6e128d1b6721e45b6d087bc","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.3.6","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"5.0.0","dependencies":{"@polymer/polymer":"^1.2.5-npm-test.2","web-animations-js":"2.1.3","@polymer/iron-meta":"^0.0.3","@polymer/iron-selector":"^0.0.3","@polymer/iron-resizable-behavior":"^0.0.3"},"devDependencies":{"webcomponents.js":"^0.7.0","@polymer/iron-icon":"^0.0.3","@polymer/iron-icons":"^0.0.3","@polymer/paper-item":"^0.0.3","web-component-tester":"^4.0.0","@polymer/paper-styles":"^0.0.3","@polymer/test-fixture":"^0.0.3","@polymer/paper-toolbar":"^0.0.3","@polymer/iron-flex-layout":"^0.0.3","@polymer/paper-icon-button":"^0.0.3","@polymer/iron-component-page":"^0.0.3"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-0.0.3.tgz_1454459255815_0.5248784383293241","host":"packages-5-east.internal.npmjs.com"}},"0.0.4":{"name":"@polymer/neon-animation","version":"0.0.4","keywords":["web-components","web-component","polymer","web-animations"],"license":"SEE LICENSE IN http://polymer.github.io/LICENSE.txt","_id":"@polymer/neon-animation@0.0.4","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"69fcd0fe20776a3ede2d301346d58748ccecd587","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-0.0.4.tgz","integrity":"sha512-cjhJWYvN/AJ9gaZilrQi2IuenuofGEoD6jB1kq+vUGQSFTzNgVSk+fFlEUAJqPNVjNZtyM6zzjP92w2+5fSFGg==","signatures":[{"sig":"MEQCIASDUBMRHT7CXnP4+km4uoymfmEc493nJMupNnx9AwIpAiBfgSCBLKVq0lBPSOoclICAMV3aKV3IkR6UslmW/Ooe8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"_from":".","_shasum":"69fcd0fe20776a3ede2d301346d58748ccecd587","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.10.3","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"6.4.0","dependencies":{"@polymer/polymer":"gloo","web-animations-js":"^2.2.0","@polymer/iron-meta":"gloo","@polymer/iron-selector":"gloo","@polymer/iron-resizable-behavior":"gloo"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-0.0.4.tgz_1483687888021_0.6228270535357296","host":"packages-18-east.internal.npmjs.com"}},"1.2.4-pre.1":{"name":"@polymer/neon-animation","version":"1.2.4-pre.1","keywords":["web-components","web-component","polymer","web-animations"],"license":"SEE LICENSE IN http://polymer.github.io/LICENSE.txt","_id":"@polymer/neon-animation@1.2.4-pre.1","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"04bdd14f1a312298a84d2b3e892d3cdadcd52798","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-1.2.4-pre.1.tgz","integrity":"sha512-QWtOfD4SHs4GrzDzUU5XEFkhMs1vsvPjjOJmgZ2DdBNA7OgfkjwTLfnoIr5pd+C3Cdi47ys5BAMp1Y/FKSM3lQ==","signatures":[{"sig":"MEUCIQCr6tAmJpiNoyb86zS/79TgqXcwm8wraI8Ej1l3wJVRJQIgTazSA6To6Fyo2leAzAvVxGrFsKMb+WN89sqs45Tj2P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"_from":".","_shasum":"04bdd14f1a312298a84d2b3e892d3cdadcd52798","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.10.3","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"6.4.0","dependencies":{"@polymer/polymer":"gloo","web-animations-js":"^2.2.0","@polymer/iron-meta":"gloo","@polymer/iron-selector":"gloo","@polymer/iron-resizable-behavior":"gloo"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-1.2.4-pre.1.tgz_1484789599375_0.15918405051343143","host":"packages-18-east.internal.npmjs.com"}},"1.2.4-pre.2":{"name":"@polymer/neon-animation","version":"1.2.4-pre.2","keywords":["web-components","web-component","polymer","web-animations"],"license":"SEE LICENSE IN http://polymer.github.io/LICENSE.txt","_id":"@polymer/neon-animation@1.2.4-pre.2","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"93b875fed9988ef6a0de1adf19d114e639ac41ff","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-1.2.4-pre.2.tgz","integrity":"sha512-BpdQW9cJWCv5rBjn/rWUhkl8/7EGhEfxt8jPcOHqFKRUyV9avsgWe2vo1t66Lg4WlxD74T5JvpQfmjnPtO6wmQ==","signatures":[{"sig":"MEUCIE2LpWiAO80jDJZTvwaVp+Nn6UbINiXOErsxuAX8izMKAiEAzd56F0N4VYdF3315FkunoaCX2atdZPfe5vcaG1nQL2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"_from":".","_shasum":"93b875fed9988ef6a0de1adf19d114e639ac41ff","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.10.3","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"6.4.0","dependencies":{"@polymer/polymer":"gloo","web-animations-js":"^2.2.0","@polymer/iron-meta":"gloo","@polymer/iron-selector":"gloo","@polymer/iron-resizable-behavior":"gloo"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-1.2.4-pre.2.tgz_1484954718521_0.1688929288648069","host":"packages-18-east.internal.npmjs.com"}},"1.2.4-pre.3":{"name":"@polymer/neon-animation","version":"1.2.4-pre.3","keywords":["web-components","web-component","polymer","web-animations"],"license":"SEE LICENSE IN http://polymer.github.io/LICENSE.txt","_id":"@polymer/neon-animation@1.2.4-pre.3","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"b4e0a92ff62b5ad8294f8b95cdbd5c1947eefd65","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-1.2.4-pre.3.tgz","integrity":"sha512-QTHB9qoEZ1Wp2skMT4M7uPSnXtqXx6SOOCvdG7ccr/Q6hDO2YGHZcmpCMGZi7wAw0tF91C9PQmQThyCLv34EdQ==","signatures":[{"sig":"MEYCIQCNj1nFYuBP/ZntJ1r6wz7w7KcRHriE/TyA12sKncpHVQIhAOI85i4jr1h7cdSWZhkGm2FIoiECOiXlIYgAGhPE1egi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"_from":".","_shasum":"b4e0a92ff62b5ad8294f8b95cdbd5c1947eefd65","scripts":{},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"3.10.3","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"6.4.0","dependencies":{"@polymer/polymer":"preview","web-animations-js":"^2.2.0","@polymer/iron-meta":"preview","@polymer/iron-selector":"preview","@polymer/iron-resizable-behavior":"preview"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-1.2.4-pre.3.tgz_1485217325375_0.7676144787110388","host":"packages-12-west.internal.npmjs.com"}},"3.0.0-pre.1":{"name":"@polymer/neon-animation","version":"3.0.0-pre.1","keywords":["web-components","web-component","polymer","web-animations"],"license":"http://polymer.github.io/LICENSE.txt","_id":"@polymer/neon-animation@3.0.0-pre.1","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"a9c538c5d969f034375ff14cf24b1aa500adba52","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.1.tgz","integrity":"sha512-AF+bYIjkU3a/Fd/TW6YApsQ4UEl+waj53oXWNfqc3Q+dDT6w+/4UWacp9Oqr/9eqbLjcpALsdcu0mkOyqWZ9+Q==","signatures":[{"sig":"MEYCIQD3cNnGbOZpjUsHpwipoAzHLaPmKy5dPBMgrgCqk+ge6gIhAOlpR2Ss+dG6UmhZrARox3A/7Z6iAcZuz+0/tr9jcBIu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"gitHead":"e9d9946981c877335c84fc41a572dc9249e2e9c6","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.5.1","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"9.2.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.1","@polymer/iron-selector":"^3.0.0-pre.1","@polymer/iron-resizable-behavior":"^3.0.0-pre.1"},"devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.1","wct-browser-legacy":"0.0.1-pre.10","@polymer/app-layout":"^3.0.0-pre.1","@polymer/iron-icons":"^3.0.0-pre.1","@polymer/paper-item":"^3.0.0-pre.1","@polymer/paper-styles":"^3.0.0-pre.1","@polymer/test-fixture":"^3.0.0-pre.1","@polymer/iron-flex-layout":"^3.0.0-pre.1","@polymer/paper-icon-button":"^3.0.0-pre.1","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-3.0.0-pre.1.tgz_1512525019280_0.785842502489686","host":"s3://npm-registry-packages"}},"3.0.0-pre.4":{"name":"@polymer/neon-animation","version":"3.0.0-pre.4","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.4","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"4a4fcdc5c6c1a87aa14eee3364e760d04a29bd9c","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.4.tgz","integrity":"sha512-QX+r0823xSC5MPIKOQb6DZCoWs/lC+ukabynXzA8GPvPppaDpMvRPFRO1jBaUojxxbHTSn5x/IwY2/ApMCNKJg==","signatures":[{"sig":"MEUCIAV18AvdXsyWTo/xgETfzAyVtAKS+1pIMVZYDH1+rgMbAiEA6I2+9Fit6gorVso6H/j9xxCZnIZPFnfpeAVzj3jEZdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"gitHead":"f2621290b7177761fe188ed619f9419ecd3213e8","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.5.1","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.2.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.4","@polymer/iron-selector":"^3.0.0-pre.4","@polymer/iron-resizable-behavior":"^3.0.0-pre.4"},"devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.4","wct-browser-legacy":"0.0.1-pre.10","@polymer/app-layout":"^3.0.0-pre.4","@polymer/iron-icons":"^3.0.0-pre.4","@polymer/paper-item":"^3.0.0-pre.4","@polymer/paper-styles":"^3.0.0-pre.4","@polymer/iron-flex-layout":"^3.0.0-pre.4","@polymer/paper-icon-button":"^3.0.0-pre.4","@polymer/iron-component-page":"^3.0.0-pre.4","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-3.0.0-pre.4.tgz_1516218916260_0.019568347604945302","host":"s3://npm-registry-packages"}},"3.0.0-pre.6":{"name":"@polymer/neon-animation","version":"3.0.0-pre.6","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.6","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"b88608a9004e26d15cdecb72e8565984d2d0efda","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.6.tgz","integrity":"sha512-3tSGZNXfcwsgnG1DDAUuw2uA8X03Gy0Mzoe6YXWebyizVCGFOJ2NMeXe3sHwKP+gtKZGXmGw/m7EH5DYg5vzXA==","signatures":[{"sig":"MEUCIQCtdG3YfbOlUgxougoVNIUL6w8p7QUgxo8K8n2LH/RjMwIgOawKHrA6y/+h1KFIye9tl5qdvcmJg0NhEyS9ptICJfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"gitHead":"3eb0367f02fcb02034c6deb4a324bbc05e9bf99c","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.6.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.4.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.6","@polymer/iron-selector":"^3.0.0-pre.6","@polymer/iron-resizable-behavior":"^3.0.0-pre.6"},"devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.6","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.6","@polymer/iron-icons":"^3.0.0-pre.6","@polymer/paper-item":"^3.0.0-pre.6","@polymer/paper-styles":"^3.0.0-pre.6","@polymer/iron-flex-layout":"^3.0.0-pre.6","@polymer/paper-icon-button":"^3.0.0-pre.6","@polymer/iron-component-page":"^3.0.0-pre.6","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-3.0.0-pre.6.tgz_1516835029745_0.2531439191661775","host":"s3://npm-registry-packages"}},"3.0.0-pre.7":{"name":"@polymer/neon-animation","version":"3.0.0-pre.7","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.7","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"663ba183da1e1c39d5d79b8315e1ea9d8d2ec44c","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.7.tgz","integrity":"sha512-eJpb1vmtmnsbC9ZTVgjjn7tV6rhoPfM+DkkTlKLH3lY/hkOX/SuVYVMwqLebid+1GJeZKbHLwQYQKTcP1ryfSw==","signatures":[{"sig":"MEUCIEOAbHaXlR0QU41xxvT8IR1sFxMO7cB6cTvwxCDq3aP9AiEAyYbOb9hBHpCCEIlnzhsBSXQiwGdxcqheakAauG0Z8hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"flat":true,"gitHead":"4fdc9532d6d126cbf7599831c07eb579f0b70d51","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.6.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.4.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.7","@polymer/iron-selector":"^3.0.0-pre.7","@polymer/iron-resizable-behavior":"^3.0.0-pre.7"},"devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.7","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.7","@polymer/iron-icons":"^3.0.0-pre.7","@polymer/paper-item":"^3.0.0-pre.7","@polymer/paper-styles":"^3.0.0-pre.7","@polymer/iron-flex-layout":"^3.0.0-pre.7","@polymer/paper-icon-button":"^3.0.0-pre.7","@polymer/iron-component-page":"^3.0.0-pre.7","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation-3.0.0-pre.7.tgz_1517338122598_0.07318296399898827","host":"s3://npm-registry-packages"}},"3.0.0-pre.8":{"name":"@polymer/neon-animation","version":"3.0.0-pre.8","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.8","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"c900d19088bbfc501ddf0306136ce0a67b03087c","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.8.tgz","fileCount":66,"integrity":"sha512-cyBcmboZY2/BFGTfhasKJCWRQV7mkYiPT3K5CofjPR2qMj+fTbm7Nn2oHPmczHQtBwqA/tLsmOdDyTNFtssPOw==","signatures":[{"sig":"MEUCIQDbeZK0UWVflZhHrQsJI8grnllNg5MBAGEB3Xratex16wIgDlIrryiB1EUDkojDx9di7ENBu81hptX3XC/YZhdLBok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161351},"flat":true,"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n* [Demos](#demos)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n\n<a name=\"demos\"></a>\n## Demos\n\n * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)\n * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)\n * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)\n * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)\n * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)\n","gitHead":"3b31a30d96758012587031f61787758f8f95818d","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.5.1","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.2.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.7","@polymer/iron-selector":"^3.0.0-pre.7","@polymer/iron-resizable-behavior":"^3.0.0-pre.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.7","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.7","@polymer/iron-icons":"^3.0.0-pre.7","@polymer/paper-item":"^3.0.0-pre.7","@polymer/paper-styles":"^3.0.0-pre.7","@polymer/iron-flex-layout":"^3.0.0-pre.7","@polymer/paper-icon-button":"^3.0.0-pre.7","@polymer/iron-component-page":"^3.0.0-pre.7","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.8_1518029801533_0.016447836783366254","host":"s3://npm-registry-packages"}},"3.0.0-pre.10":{"name":"@polymer/neon-animation","version":"3.0.0-pre.10","keywords":["web-components","web-component","polymer","web-animations"],"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.10","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"contributors":[{"name":"The Polymer Authors"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"862e91bb36fe4782c270d66ff4e5c91c8fbc0a3d","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.10.tgz","fileCount":90,"integrity":"sha512-vTBoqwEs74ahO2uqQ1nSTFpV+46l2ffJZRieBkKY09ZplUV7v/Cyr040TsW1m92aNf3n/pyXalkoW9zzfddcyg==","signatures":[{"sig":"MEQCIHEmfXz2sjw3vk+3PcQtpnFKvFjNY/rB9GkJc3QKZ9UjAiBAdK12T8S93VqoV+r1chl0sHmB9gCv36HyEDzU5npLDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176160},"flat":true,"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n* [Demos](#demos)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n\n<a name=\"demos\"></a>\n## Demos\n\n * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)\n * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)\n * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)\n * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)\n * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)\n","gitHead":"15865c8887dd70181be2aaa091906a9b1f607c6b","_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.4.1","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"8.2.1","dependencies":{"@polymer/polymer":"^3.0.0-pre.10","@polymer/iron-selector":"^3.0.0-pre.10","@polymer/iron-resizable-behavior":"^3.0.0-pre.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.10","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.10","@polymer/iron-icons":"^3.0.0-pre.10","@polymer/paper-item":"^3.0.0-pre.10","@polymer/paper-styles":"^3.0.0-pre.10","@polymer/iron-flex-layout":"^3.0.0-pre.10","@polymer/paper-icon-button":"^3.0.0-pre.10","@polymer/iron-component-page":"^3.0.0-pre.10","@webcomponents/webcomponentsjs":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.10_1519341336523_0.5205148078811481","host":"s3://npm-registry-packages"}},"3.0.0-pre.11":{"name":"@polymer/neon-animation","version":"3.0.0-pre.11","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.11","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"973631de9a83b65400bb7f11458d37cab1014d30","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.11.tgz","fileCount":66,"integrity":"sha512-1lqxSnRS7/6N7MwKPTOe2FCufShOsX7YGs4l38Rdbj5IDoVpo0HYd0VDTJYtuiq1e5OaW9taZ21LmYoZMmlbTg==","signatures":[{"sig":"MEUCIG6y3z5MWIvMQyq+zrAh85fo8mJ1jFGqb4wKBAzdW+JDAiEAj55kNuUWPEHrEkWrasBXeyxu1+mynWK7orunFExI8vA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158822},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"068720675ab89453d7a9229ef1434575924dd7dd","scripts":{"update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.6.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.7.1","dependencies":{"@polymer/polymer":"^3.0.0-pre.10","@polymer/iron-selector":"^3.0.0-pre.10","@polymer/iron-resizable-behavior":"^3.0.0-pre.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.10","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.10","@polymer/iron-icons":"^3.0.0-pre.10","@polymer/paper-item":"^3.0.0-pre.10","@polymer/paper-styles":"^3.0.0-pre.10","@polymer/iron-flex-layout":"^3.0.0-pre.10","@polymer/paper-icon-button":"^3.0.0-pre.10","@polymer/iron-component-page":"^3.0.0-pre.10","@webcomponents/webcomponentsjs":"^1.0.0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.11_1520558241161_0.7786873827526013","host":"s3://npm-registry-packages"}},"3.0.0-pre.12":{"name":"@polymer/neon-animation","version":"3.0.0-pre.12","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.12","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"395327088ee038f6355e6e08edab827d323f9392","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.12.tgz","fileCount":67,"integrity":"sha512-24lqtSepkFkS/0ys6Q7V2ehPD+/A6H+yM3gUSa7PsYWVIXYRj0dwvdXAWaLJHKK+xZeW2YbwQ3SX8LYJRsVO3w==","signatures":[{"sig":"MEYCIQD1QdZf7Jp3wIt+XFai3OSfaWzZnsE7IXU/Ju6+ACzn/QIhAJTag6Dwoz0u175XzZf7CoDTsZ2cedd3nIFKVCPD/RKF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166922},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"b763e2f7e097c0d12a5957f525fe02ac94decf0a","scripts":{"update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"5.5.1","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.2.0","dependencies":{"@polymer/polymer":"3.0.0-pre.12","@polymer/iron-selector":"3.0.0-pre.12","@polymer/iron-resizable-behavior":"3.0.0-pre.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"3.0.0-pre.12","wct-browser-legacy":"0.0.1-pre.11","@polymer/app-layout":"3.0.0-pre.12","@polymer/iron-icons":"3.0.0-pre.12","@polymer/paper-item":"3.0.0-pre.12","@polymer/paper-styles":"3.0.0-pre.12","@polymer/iron-flex-layout":"3.0.0-pre.12","@polymer/paper-icon-button":"3.0.0-pre.12","@polymer/iron-component-page":"3.0.0-pre.12","@webcomponents/webcomponentsjs":"^1.0.0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.12_1521737831131_0.1748411043533009","host":"s3://npm-registry-packages"}},"3.0.0-pre.13":{"name":"@polymer/neon-animation","version":"3.0.0-pre.13","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.13","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"e6c4b9992742d731792fa8bcc6a67074bd1af481","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.13.tgz","fileCount":67,"integrity":"sha512-WR4yB5fjkJWicbNxZacua29lwbku8EoKXZsTcyk2wvakveFf+ZaAq6Wz85yK7qg3qKjE48TGCI0yHlbcZuGNoA==","signatures":[{"sig":"MEQCIG6uWDDmmkiZZYyovLa7TpuL/keV3RklPnvVs2kk9VIXAiApXQRBe9nI/hTHUB9HZVqMhK5sEWFRpM1WPdCNrMuGIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6PDOCRA9TVsSAnZWagAArgUQAJGfNXl5VPI9yiIMGxRO\nC2HYCQqnTgcuF9+/ZP18mpjv2mHjfn893awdEdLn0pKNpjhYGjg6O/BOoq81\nLLfgc0oTxIVWkPLqkZ28yEJn24A2YIPCaud4hHVEsqIobjETGseoRfoHHnjc\nnwYRYxh5lIOLAbv4R6zAQqRIaDdJQ8AP5EkPdaa502G0m8RIEgmNOyyUcHjI\ndcFFxUjWbfG9HNCbnu1yMiZt3Qk6FPriVlE9tKsT/xoleRqag3wmBl2TqJcK\nv2nWBcdi/Hz7trmqOE03YiUK53iF88YgSXQFb+E6+dq34OjhNnjU5lyu7/7X\nhVMaNRy9okxTeNBgr0wFAqUQkmSy/Kme0Dcxyk7etOxulXBDS+LwGiOCgE19\nYvfKzzNdVejIgoM+tI3yI9VwrUD54P/7cKHNMA2zLUhFX+tFY0rQPWn0KD0n\n3AseIGD7b3na7adYcvcuIsQJmpaWaXe9MBE7/6SVDGwTaLKCf9ugmrAUlXZL\nxR4eeX93MhTRs2/O0zBHnbh70gqDzq+QbKsXl6EtLrENuBnwU3QzQM3NV5ab\nJkPOFBzUJLUuAjzPxbV+bPHF5Aea5eJsA3EPW5TKUhIE1iKCZh8OfIJ1jIkD\nVImthj7MWnPVWhPBGHizP6wqTKz7SLwKjR6vg2MNY5OFFFxchnt90p/7Tmbo\n7myI\r\n=knFO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"19b50d7bffb59fca8fc7828b7e191b06f3e5153a","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.13","@polymer/iron-selector":"^3.0.0-pre.13","@polymer/iron-resizable-behavior":"^3.0.0-pre.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.13","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.13","@polymer/iron-icons":"^3.0.0-pre.13","@polymer/paper-item":"^3.0.0-pre.13","@polymer/paper-styles":"^3.0.0-pre.13","@polymer/iron-flex-layout":"^3.0.0-pre.13","@polymer/paper-icon-button":"^3.0.0-pre.13","@polymer/iron-component-page":"^3.0.0-pre.13","@webcomponents/webcomponentsjs":"^2.0.0-0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.13_1525215438467_0.26833698466711775","host":"s3://npm-registry-packages"}},"3.0.0-pre.14":{"name":"@polymer/neon-animation","version":"3.0.0-pre.14","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.14","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"cfa3abeafedd10d2d135fef6a6903efc23a3d679","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.14.tgz","fileCount":67,"integrity":"sha512-JfeOKG9C5U7s8ywOOd8DGBNI9sRn2ksEUOyGLuZEHFeTjUwoXmhP9estI7prJcCxzZMrn3xDhyInQmIPjJELlA==","signatures":[{"sig":"MEUCIGA4zCGh8UuGLmNNHLEhs/8wzYhHoCJ2IqQ0DP2f0bFXAiEA6S7ANjGpyFRNEcAJ1I3xIPaRAcnjtJlhyD7Y7MNRWvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6QhhCRA9TVsSAnZWagAAHi8P/0aOFxxYqBXizpjPstgH\nlJwx+X6EFgGywtzGrEti1yy9bvgkB1j0R5wZe5bfMoDeFGBdFrY7kV/7shcw\n5C8FqE8l7eUqpV+KQyUPPuFkLPaROAF3Xf0ilAP9mfaNtr/VSHTE+eUTdAv0\nUEeFcg2WJ/ZzDKBpxry5NhyziOezpYQzTj81+n83dnaXYvx6Gc/mWmRXLmVx\nEDFKp9Wl+pgmAE0QdZeCzeVtN2T2U+bNThd2gufTJ5QVdP53aZL5b9kbqay0\n2GximBCU5GJ4w7IwJx0GE+GzW9et/ZwpIn2IUR92cLvY2j0p8K2tk/vQtXA/\nlfunTH9B8qmbUwPvcrp3/LOxdmCdof1Q+3nIDsDhi7bUURdPqORXP7N5bVLl\naFvdRLnYjTQaZhHra7JuZbOev8KZuurWiS5xrLcQDZxCrmx/QSnvWt+klj6B\nVDNFQFFFYWnDzFTcRNyrLY7MQdV6NNlRbhDEr5tg9KrM6QwJANj8NbPJ6pvJ\ncsQ/HUX3ZiCjG0M1U0mL/LcN29mOZi8pEiEqs71jm+ZBAEzxmd3fgSMsgELl\nC/XwQfE51DU/a2NyZU3uWUFk25hwK+xuQN0fQ1tPZEE7hy/HuwGDbpeRcoK6\niy+T7cayLC1hPQ4PLFfcYEzeUZ1C0g+93n6vzQ/v43ILWH/3uW0OfR8gt4Ne\nDARQ\r\n=rHC9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"b1d7f07a47cf82b2aac55004c1803a908bb90273","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.13","@polymer/iron-selector":"^3.0.0-pre.14","@polymer/iron-resizable-behavior":"^3.0.0-pre.14"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.14","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.14","@polymer/iron-icons":"^3.0.0-pre.14","@polymer/paper-item":"^3.0.0-pre.14","@polymer/paper-styles":"^3.0.0-pre.14","@polymer/iron-flex-layout":"^3.0.0-pre.14","@polymer/paper-icon-button":"^3.0.0-pre.14","@polymer/iron-component-page":"^3.0.0-pre.14","@webcomponents/webcomponentsjs":"^2.0.0-0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.14_1525221473039_0.28911649010060914","host":"s3://npm-registry-packages"}},"3.0.0-pre.15":{"name":"@polymer/neon-animation","version":"3.0.0-pre.15","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.15","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"220e6b60d6f9ae6120084497ac82c95d0af54c99","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.15.tgz","fileCount":68,"integrity":"sha512-KQ30X5E9oLBTo9hmBqaTrsf1c/em36UrC4ErVdh/ZdVwi6hiJouM31qTslxi/KzoIpwocpT7wyBXoIAmWTytzw==","signatures":[{"sig":"MEUCIQCnAo/2LdjxQ2j//hHnHTJnxVSIzEGB3XUAP26nqS9k/QIgedSfUrdr+7BwdFgvjp3diCme0DVdX/LVrQUgoTOW3qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6iW6CRA9TVsSAnZWagAAQwUP/3OXbRV350xS3/eP7xBx\nwh6IUprs7CmzchW5t9NIcgriIkyNdy2H8+sJy7/0UD/WmyWS9gfkz9U/vycc\npAgHHQUYGnWgYIKyqnMzE+tmCw3bCcNVgEdIk77PAr9Qrv5SHyY2DUHkgaC5\nOsMNiFH7cIxQHREP1SEGHxO8M/QEL3ZbQAJc+dtbztax04nxPg4QEQEddet2\nU6hwtDWMfY61nBrse35i1WEofdPO9mZ8wvS9N0V4ti6P6KhpB/u2jjC0fhm+\nIcf6N4JUdAYYe63WB7vzGs7O+ZmVPcqG37iyXK//8ET/sS7M7zBnvUCbL5Xs\nm4129wkXDQ78l/B2bn6+YWOBeOd1f9+HvJU+8h7PB3qi2rv2yoXF46kqdc22\nsoKVx/T1Sucv59fMC3/CHGYicxFHuAi/ayPyiUzA9LzmGUSv6WrHho2Y7n10\nUw8mccrX7xVE4fRfw3x8Nalz1D+DImno4R0VOCdW2WO1fUxQ7vwVxZyWzUnu\nsuWVchPCS8Trr1wUx3eNkyJL2KgKnecMCxwFHvpx6bHygIdeXsY0lUpioEcL\nprjnDDMuyAmtjkB/jn0sdhqhG1q0tcSC2zpiP+qraSto7+7CEURiAX9fb/yZ\np78vQkmN+mKiM16QtsGvqOASFNAwBptGd4bUacOlnQ7OZB4A7w7qGT1vF+qc\nq/9l\r\n=8rEJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"e80ba0a05b8f94e92a94f6fd0dad98d25673b81f","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.13","@polymer/iron-selector":"^3.0.0-pre.15","@polymer/iron-resizable-behavior":"^3.0.0-pre.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.15","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.15","@polymer/iron-icons":"^3.0.0-pre.15","@polymer/paper-item":"^3.0.0-pre.15","@polymer/paper-styles":"^3.0.0-pre.15","@polymer/iron-flex-layout":"^3.0.0-pre.15","@polymer/paper-icon-button":"^3.0.0-pre.15","@polymer/iron-component-page":"^3.0.0-pre.15","@webcomponents/webcomponentsjs":"^2.0.0-beta.2","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.15_1525294519424_0.7468629953887247","host":"s3://npm-registry-packages"}},"3.0.0-pre.16":{"name":"@polymer/neon-animation","version":"3.0.0-pre.16","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.16","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"7290894a5a0aeb2087c65186044fe601b118e9a4","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.16.tgz","fileCount":68,"integrity":"sha512-HohXrmdW1fUIOPwQefIToQalhl6gC0Iu+XIlOd2K9YRYaE0JEiohagFuy28LTpdD1lOo0pT0Si/MsMOMiRcW7A==","signatures":[{"sig":"MEYCIQCPsj8kQTkhN6afwPq6NZudBbeAHrjTqcWERhBejuTgdwIhAMjiS+eZ7RAOjcZnS5S6w1DKQJNKpaLNufmAoI6O4yUj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":178917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7MAtCRA9TVsSAnZWagAA53oP/Ag6XxHbe+qbNstKUiuJ\nay6DTqbcZ5Yvr80pag16qRE5GQ/W1HIiqPVDcRUihfSzOk7rWKz1MlglbSX5\nMyx42D2XZpbnittQbAd77L+Gy37OkAK2L4iDdgbsN/gbh4nHNPl95N9Id0J2\ntePAALjz/Gf/Duf8jAjp9PI8DJ2+6jQ46ytFhDp4J4hkw+iY4t9/nWllOdoa\nXwvG/ER1Zh1bUnIcl26gdEmR9yqJeX6dqAbvAmfdAO0z2G14lTnJFIaMIsUj\n47ungBMlUGy1fgMXW5GEvq6K2DV67Hb09rCb2OZJ8x4wnvhNkSireZZQu5Jr\ntmvVDwAaxzu25+WmPDzTawHceh3xjAFWO4thQvPRHVeGL9UGLkfD/zsLMzzJ\nsj+VH3Gg92eeReJPxUg5QYRhC40ZXvrdGv2IviTbdl7KKkwmpx7QdHoelqot\niux3Z/7N6usess8rwjp+vOUG0dy2lcezv+dDD14aPLjKuHeUove1wTL0YOKb\nPyXIQiyZ0pKKT6jytj/5LkHOQOLYvsRfFTSJMSsAYntXUqnKnwBP/RtM2qn+\nmml0P73dVrHsTzsxcb8Xjk/2A259vGZ7ja32F76t5cct31IGW7AOTtQ8S1X8\noqErvY8lDPHQOjq1/6+b5fn5Wscw1UOZjF008r48rDq6XRuHGQKrLOS5IsuY\nXPXb\r\n=9jGx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"a85ad2725f65242e28e5e4843c95fc7766c201fb","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.13","@polymer/iron-selector":"^3.0.0-pre.16","@polymer/iron-resizable-behavior":"^3.0.0-pre.16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.16","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.16","@polymer/iron-icons":"^3.0.0-pre.16","@polymer/paper-item":"^3.0.0-pre.16","@polymer/paper-styles":"^3.0.0-pre.16","@polymer/iron-flex-layout":"^3.0.0-pre.16","@polymer/paper-icon-button":"^3.0.0-pre.16","@polymer/iron-component-page":"^3.0.0-pre.16","@webcomponents/webcomponentsjs":"^2.0.0-beta.2","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.16_1525465133452_0.2877173837363691","host":"s3://npm-registry-packages"}},"3.0.0-pre.17":{"name":"@polymer/neon-animation","version":"3.0.0-pre.17","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.17","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"e961eb052fc3d4d362a7ec87935f9bd25c0ee3de","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.17.tgz","fileCount":68,"integrity":"sha512-UtgXaTrQocYMTJVbZTqPSx5oBcB/kA+ernb5t+jO2nlD3FCdtMscsIdRHbkqEuHr95xTkX/7e7OzHnogYP2qRg==","signatures":[{"sig":"MEQCIDozIRGY8Rv5JnucWuoFCs76H0mGz1uRb4rE0DBb8jqtAiBYvjIPHaxuNryT7wjBtnQFlvFpyxi5z94mfECqTuVP6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8TDsCRA9TVsSAnZWagAAtQQP/jhz31VswB1felU5GgNE\nkYbYjKxUEwwR9/2tOKLh4mTwpAPhunE+A/iE4H4Z1RcG9ud2PtY2hvFtQH26\nfVJATDmyz+g1BkbEI5ux7ixzcOBJnGOUvZGXADDsf3nabmjx17Cs/XGXCTvu\nTxF2dp4GM7RbP7O1dkFDxeUIGv9+86L8NEHAaJs53sP0a1wyuxmfU2UhVtU/\nko617SZ8XcC90/Tmy9lV5EwjzdlnXAG638tqQqoJt+UGAczFWgKyBofahsOQ\n9IHmNZA7Fs+dRLRZ+CVcRzH2t0nY71d5WF12sLww4VXlvxv6sA+IdHfcADCI\nHJzyNM4KQIEQeYkIDCodVYToELLq3XmHSAWLX+4wKph4Z4qR11vb0ELEkSjH\nVdwfrjh4GiLAgootf7NCv24BKxXDxHmKT+9N4bYTP9FT25b6FItB8NR8C8/z\nNZsGxI8P/+WUzJbYiw0doGSXVi2wbcIU6VlzoJ0FVLA4dex9V0lhtDe++n2z\nzUsJVwne1KPgoTy/YRkFcPnNjIZ9OC+r9D+xfinFst37yHDdKa+3qzuTjJfs\n+PEsyl4042vGZFh7YhnrY9cdBcg8WM24druIIBiza39w76I2NwxHCUdA00CK\n6AQon2lDtmVqbf6taHh6klbS7x65q0bqR7jqFfgSr43FczSHI7BCxCmMr9XY\nu2IU\r\n=62vt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"45b1b1a54d5ae9d701d381cc22863f9871664eb3","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0-pre.13","@polymer/iron-selector":"^3.0.0-pre.17","@polymer/iron-resizable-behavior":"^3.0.0-pre.17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.17","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.17","@polymer/iron-icons":"^3.0.0-pre.17","@polymer/paper-item":"^3.0.0-pre.17","@polymer/paper-styles":"^3.0.0-pre.17","@polymer/iron-flex-layout":"^3.0.0-pre.17","@polymer/paper-icon-button":"^3.0.0-pre.17","@polymer/iron-component-page":"^3.0.0-pre.17","@webcomponents/webcomponentsjs":"^2.0.0-beta.2","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.17_1525756139007_0.2113285635973694","host":"s3://npm-registry-packages"}},"3.0.0-pre.18":{"name":"@polymer/neon-animation","version":"3.0.0-pre.18","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.18","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"a92159f845113ee1235c6786e4da9462c1d19d18","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.18.tgz","fileCount":67,"integrity":"sha512-qxAh4BBQjW374asSaFDiBtWWt78T/mBa5cmTZJTd3qKqecGSjcIbLuFqX46V4aBClpv8Cidzd6Fumnyi0A7oQg==","signatures":[{"sig":"MEQCID69lggdJ+ATREvuP6hs/2j2o+lNSxxs5VoraBkeL7AUAiAMWrclTtRJG7QczL4tPvnNnwJGbMN0IZdxBx998PHdlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8scJCRA9TVsSAnZWagAAhHgP/Alh0nmtyU2hCBI1jRWb\nmRS2Yq5nchWpG4YoaJoZYPzd8z09trdfLqbEqdaIHD0C3NOpI8WCwGpq16z9\nt3WbEU/htWockx99UiFD2Qqke9DyHGnEjZ1bk7ZaA//dpVA7hfQJfYY6f0Qe\n3yKgz6um2sr6O0i7XSKXH5NUImYOtSRXuPaqYpEzmGLDoEVgPgAKLIf0YM3+\nO0FmAFQkjIyepfhHyWt/j5OY7Hnw9nQXYdsVarg2XNgiRlzEOu7Kt2T+oLjA\nQwGLxyVnbzODumzFMNzP8Sa0K6rab9AjMwg8pmDbfCCS9Rqol9fWUFHGn5ft\nDf21xDs2uc/MegiZ2c0jFKGEzpXTbxne9mOcaafBRCLOhQMGeMoODbuWNYJ1\nxMJmV1OfIJPteoKy9NClQbM+iPGhdSV/7K0IwgYnsSI5KJr4Q9dvu6mbJ08g\nntHFQHPoImVmoPieCq/4oQWIofqf+bQnhZku1hovXMycD58fhgLnFzW8eF26\n60soT+RqgRVZi/biSdYAjBYsqORXPwPSKmVcV/T24YBjcQ1OhaCUaZwwonv6\nSr9iWbRdE/5W3YgElsR8AG4S6lCuZiqnRYh9hc+F2s4r/cMLJogDjDVGiRDH\nrLFAVZzxjllBi2D06fDPFPClGUEEm9L+pu4qvkvEAxy9uA/hJKM2qjhM3+SD\nF1ir\r\n=2FZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"683b8f1983737a7685c176207c963f192963ea6d","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.18","@polymer/iron-resizable-behavior":"^3.0.0-pre.18"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.18","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.18","@polymer/iron-icons":"^3.0.0-pre.18","@polymer/paper-item":"^3.0.0-pre.18","@polymer/paper-styles":"^3.0.0-pre.18","@polymer/iron-flex-layout":"^3.0.0-pre.18","@polymer/paper-icon-button":"^3.0.0-pre.18","@polymer/iron-component-page":"^3.0.0-pre.18","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.18_1525860104514_0.6575321535200036","host":"s3://npm-registry-packages"}},"3.0.0-pre.19":{"name":"@polymer/neon-animation","version":"3.0.0-pre.19","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.19","maintainers":[{"name":"polymer","email":"admin@polymer-project.org"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"0eae03142eb533988bcbd9056d82ed203a77cd8e","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.19.tgz","fileCount":67,"integrity":"sha512-mjvPV0BL1QaVR2hZc2UoPcJaefFCx9towNT2+cpNBW1VcMrAsX8FO28zbJO0ZGQlrUizym5ehYaYan4XCqDofg==","signatures":[{"sig":"MEUCIGtvqiyg+fAd+mSyZT0h/CHLU64GiNIK+BZVe2O5GBkNAiEA2cu2y/PZsdzP6HhVqZrLJky9gFh1TEVP3hi9a1TKnFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa81h5CRA9TVsSAnZWagAA8c8P/0TbuYOW8IEYdPSnknbm\nz82Tx/WxE02zvaqZ+QRki2Pj16s2z9UAFb+BKXJz9A2GEHqoYRIvXxFAOlJK\nfCTL4Usr+wC2HXP3ZZlmk88WQMJl+Io6U10+IG9avsLxRdc54JCN60SSbe+4\nWYfB9NxnZ79U2z1t4Gpb6xzATUY+1ggwKCYdWuHPkXgodbAAT0gF/X0YGNl3\nENyqwlh4T27t2pDomERjwEcv4mUoldzIiaQ/m4HwTQbvz6bLi68pOuFuD5DF\npv9ffH2Yip98bJlO+D6yqMOglKCzAnjdlqnsNqMLAkzUU8jH/vVV3grOfURS\nXjRwh/mdrZ87Ao0KRPqN6NOeALzjVjnuB615oQV85byozbGEUmZFnoGAA7cv\nqG6O5X1FsHK+7Q1EYc3E1fJqCbRzHYEqey2mn0oRbOwgq0tLK2ol0SGCfSfN\nxsQJoMCCWWasLBSni8Dhal41w49q3kE/QyUMpbwAurzyMktwvSJKnxvxDsa3\nyeNO/Q6Sq/80O/+euybQYV0yDlFN25i1Hj8q+/ET++0Bv5i1ZKn+1U/1XX95\n3BmykxP0FZ5KVz6jIKiC7rqYQDMcQpcHMR5TiTEfIG9Bs5QqWVnSL5Ee1E7a\nqrMElYPYKlYvaebM3ShLq6oU7l14xrbFRTLdKMkvBTH05lMfisC66H11uyet\n1DVG\r\n=xWdF\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47c6b81ebbcd6596ca1973271176565bce2b36cb","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"polymer","email":"admin@polymer-project.org"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.0.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.19","@polymer/iron-resizable-behavior":"^3.0.0-pre.19"},"_hasShrinkwrap":false,"devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.19","wct-browser-legacy":"^0.0.1-pre.11","@polymer/app-layout":"^3.0.0-pre.19","@polymer/iron-icons":"^3.0.0-pre.19","@polymer/paper-item":"^3.0.0-pre.19","@polymer/paper-styles":"^3.0.0-pre.19","@polymer/iron-flex-layout":"^3.0.0-pre.19","@polymer/paper-icon-button":"^3.0.0-pre.19","@polymer/iron-component-page":"^3.0.0-pre.19","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.19_1525897336004_0.7554150971997609","host":"s3://npm-registry-packages"}},"3.0.0-pre.20":{"name":"@polymer/neon-animation","version":"3.0.0-pre.20","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.20","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"b0c6394f01c40f2ca6264c8acf8cdee0610af4f4","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.20.tgz","fileCount":68,"integrity":"sha512-qwevWUKwhwxtEfsNau/gCfOGHcNrwzGzLHeGbD9FVRRhb/hP3N6hE1LIHfb6MIIxjGO0sSTzAY2p/af3VmaIEg==","signatures":[{"sig":"MEQCICIeJmn5tQ4+xjgoo0hpqaHj3xZNw2XyVh/tdkRT5wVkAiApbY+C3PoYKtpe2Mz6sl9ePaG8cdvESyexG/wibretFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLZIjCRA9TVsSAnZWagAANCAP/3SOCZF5wtYK2u3HDnXn\nagZRfg5pj7GAJyTA5CmmESCEBIIigQ9yi3lr1D7FEkOTvgKnQmnxLxtOXFhn\nx9pjKTu9Jr25IDmMfN4BDFw5NtrvIqesV8NmmIcNfQ8gH1Qytj2b+k6iKQtG\nMsFidokNYqtnazusvjH6KhuwsmXlddsmlBExtlScCWiM4qmSbB9lue25Ilzj\nbIdq7Jug/DPYHYr49A2WleIPZ/V+nGwdFSDeKLYC6yCmxvXr8mNdtHcc+tsE\nwa0vSBuCDua6kiYzvM5WqzZIwNXrhzqune12zaKJgXNCsua8IZ922nwkLAIv\nRo5WzBpiY+RcbbGodWBvt/KteCahkrN75VbmJQEJ29WF8lXDeGqCg3WrrPNF\nLBq92wuQOWMtyrDzWbjCc6EmoOZrAgTs7KF+jUP5ih6pwHmfehwkpZ3HxuFe\naW3i73w/eKDQZF0wwCafDeL3bwbu0qDEcV5bJchn7Y2mQPEnBUGlrOUWI/dG\nD7dkse7M/MkI2vomyVS+q93dEZIZCCzhROp228SFImn9JPQX0pSN1+zo13Rv\nbSo6KQUuPgyXoFdkwRpOq/uc9rYNmBg/7TjmeN/sGKinZUrJ2nJE/CwGtIAt\nLYeAt+g0eu1ykpj/wUFlysUx7J+vT7lzEKfgrkzgwKg7WX2cIT35afqbh8ZC\nwDmK\r\n=yUaf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"## Changes in 2.0\n* ⚠️ This Element is now deprecated ⚠️\n  * Please use the web animations api or CSS animations\n* Web animations polyfill is now a dev dependency\n\n# neon-animation\n\n`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/).\n\n*Warning: The API may change.*\n\n* [A basic animatable element](#basic)\n* [Animation configuration](#configuration)\n  * [Animation types](#configuration-types)\n  * [Configuration properties](#configuration-properties)\n  * [Using multiple animations](#configuration-multiple)\n  * [Running animations encapsulated in children nodes](#configuration-encapsulation)\n* [Page transitions](#page-transitions)\n  * [Shared element animations](#shared-element)\n  * [Declarative page transitions](#declarative-page)\n* [Included animations](#animations)\n\n<a name=\"basic\"></a>\n## A basic animatable element\n\nElements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n```js\nPolymer({\n  is: 'my-animatable',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    animationConfig: {\n      value: function() {\n        return {\n          // provided by neon-animation/animations/scale-down-animation.html\n          name: 'scale-down-animation',\n          node: this\n        }\n      }\n    }\n  },\n  listeners: {\n    // this event is fired when the animation finishes\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  animate: function() {\n    // run scale-down-animation\n    this.playAnimation();\n  },\n  _onNeonAnimationFinish: function() {\n    console.log('animation done!');\n  }\n});\n```\n\n\n<a name=\"configuration\"></a>\n## Animation configuration\n\n<a name=\"configuration-types\"></a>\n### Animation types\n\nAn 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.\n\n```js\nPolymer({\n  is: 'my-dialog',\n  behaviors: [\n    Polymer.NeonAnimationRunnerBehavior\n  ],\n  properties: {\n    opened: {\n      type: Boolean\n    },\n    animationConfig: {\n      value: function() {\n        return {\n          'entry': {\n            // provided by neon-animation/animations/scale-up-animation.html\n            name: 'scale-up-animation',\n            node: this\n          },\n          'exit': {\n            // provided by neon-animation/animations/fade-out-animation.html\n            name: 'fade-out-animation',\n            node: this\n          }\n        }\n      }\n    }\n  },\n  listeners: {\n    'neon-animation-finish': '_onNeonAnimationFinish'\n  },\n  show: function() {\n    this.opened = true;\n    this.style.display = 'inline-block';\n    // run scale-up-animation\n    this.playAnimation('entry');\n  },\n  hide: function() {\n    this.opened = false;\n    // run fade-out-animation\n    this.playAnimation('exit');\n  },\n  _onNeonAnimationFinish: function() {\n    if (!this.opened) {\n      this.style.display = 'none';\n    }\n  }\n});\n```\n\n\nYou can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:\n\n```js\nproperties: {\n  entryAnimation: {\n    value: 'scale-up-animation'\n  },\n  exitAnimation: {\n    value: 'fade-out-animation'\n  }\n}\n```\n\n<a name=\"configuration-properties\"></a>\n### Configuration properties\n\nYou can pass additional parameters to configure an animation in the animation configuration object.\nAll animations should accept the following properties:\n\n * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.\n * `node`: The target node to apply the animation to. Defaults to `this`.\n * `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\n properties include the following:\n     * `duration`: The duration of the animation in milliseconds.\n     * `delay`: The delay before the start of the animation in milliseconds.\n     * `easing`: A timing function for the animation. Matches the CSS timing function values.\n\nAnimations may define additional configuration properties and they are listed in their documentation.\n\n<a name=\"configuration-multiple\"></a>\n### Using multiple animations\n\nSet the animation configuration to an array to combine animations, like this:\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // fade-in-animation is run with a 50ms delay from slide-down-animation\n      'entry': [{\n        name: 'slide-down-animation',\n        node: this\n      }, {\n        name: 'fade-in-animation',\n        node: this,\n        timing: {delay: 50}\n      }]\n    }\n  }\n}\n```\n\n<a name=\"configuration-encapsulation\"></a>\n### Running animations encapsulated in children nodes\n\nYou can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.\n\n```js\nanimationConfig: {\n  value: function() {\n    return {\n      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable\n      'entry': [\n        {name: 'fade-in-animation', node: this},\n        {animatable: this.$.myAnimatable, type: 'entry'}\n      ]\n    }\n  }\n}\n```\n\n<a name=\"page-transitions\"></a>\n## Page transitions\n\n*The artist formerly known as `<core-animated-pages>`*\n\nThe `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.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.\n\n<a name=\"shared-element\"></a>\n### Shared element animations\n\nShared 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.\n\nIn the incoming page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the incoming page defines the 'entry' animation\n        'entry': {\n          name: 'hero-animation',\n          id: 'hero',\n          toPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.hero\n      }\n    }\n  }\n}\n```\n\nIn the outgoing page:\n\n```js\nproperties: {\n  animationConfig: {\n    value: function() {\n      return {\n        // the outgoing page defines the 'exit' animation\n        'exit': {\n          name: 'hero-animation',\n          id: 'hero',\n          fromPage: this\n        }\n      }\n    }\n  },\n  sharedElements: {\n    value: function() {\n      return {\n        'hero': this.$.otherHero\n      }\n    }\n  }\n}\n```\n\n<a name=\"declarative-page\"></a>\n### Declarative page transitions\n\nFor convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.\n\nFor example:\n\n```js\n<neon-animated-pages id=\"pages\" class=\"flex\" selected=\"[[selected]]\" entry-animation=\"slide-from-right-animation\" exit-animation=\"slide-left-animation\">\n  <neon-animatable>1</neon-animatable>\n  <neon-animatable>2</neon-animatable>\n  <neon-animatable>3</neon-animatable>\n  <neon-animatable>4</neon-animatable>\n  <neon-animatable>5</neon-animatable>\n</neon-animated-pages>\n```\n\nThe new page will slide in from the right, and the old page slide away to the left.\n\n<a name=\"animations\"></a>\n## Included animations\n\nSingle element animations:\n\n * `fade-in-animation` Animates opacity from `0` to `1`;\n * `fade-out-animation` Animates opacity from `1` to `0`;\n * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;\n * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;\n * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;\n * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;\n * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;\n * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;\n * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;\n * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;\n * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;\n * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;\n * `transform-animation` Animates a custom transform.\n\nNote 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.\n\nShared element animations\n\n * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.\n * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.\n\nGroup animations\n * `cascaded-animation` Applys an animation to an array of elements with a delay between each.\n","gitHead":"ebf9b6bc1f0f8eebab38077751373166bfb5a619","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.1.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.20","@polymer/iron-resizable-behavior":"^3.0.0-pre.20"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.20","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.20","@polymer/iron-icons":"^3.0.0-pre.20","@polymer/paper-item":"^3.0.0-pre.20","@polymer/paper-styles":"^3.0.0-pre.20","@polymer/iron-flex-layout":"^3.0.0-pre.20","@polymer/paper-icon-button":"^3.0.0-pre.20","@polymer/iron-component-page":"^3.0.0-pre.20","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.2.2"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.20_1529713186866_0.2553432942462799","host":"s3://npm-registry-packages"}},"3.0.0-pre.21":{"name":"@polymer/neon-animation","version":"3.0.0-pre.21","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.21","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"5a179b0091b52a32b82aa7a80e6ea8ff2f7d17e8","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.21.tgz","fileCount":68,"integrity":"sha512-aOretgBxXazpGHKqn2FepGi5VHi7tzht2IeyGHG9J9S6k955cohZQ3twThT76ZhLi4Tlu761cCu9YwFg2aLxUQ==","signatures":[{"sig":"MEUCIAkgS0pYk/6ocPFEdReQyVT43WTOcd1fUhLVH+QEfkO0AiEAiAXx62aj8hwIhmlLicUmLmzo6i7GVMWSeMdOeJbgmiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLZ1cCRA9TVsSAnZWagAAOOgQAKLus42EJFYz56s9Svkm\ny5DkV5Y2A1e8fOAMXGFYLYuvIjXD/s5rWy6znt8zqqRolNbTW6tIJw3Vjs8/\nKmLmB4qbfNAOzdm1LdmBwAXAghpu6lmdAg+wrKk1l47iBFxLtCRIh+7mYBy8\nJ49mkjQsSFpnWDb66QafK45uEKxGnwf+2boo9Nt9udCZrwX4jCRpmAM7S401\noa5fURzHpp9X1QDul/Up1QFtV8+FPf1DP6EygyuRjBa24ue/h/EV13goqJvO\nh5gMwbiIy/GrABSY2JvZIbBSzHhOd0s8xUiQA1ArrVpi0Jx5d6GqZua2Czbe\npNL0YKhviLyOKZp7+uAsVwpG8hk6AsF+0kVZBy7RUn1bzkpLoNUghZu8VKew\nXetZdGhCxlrPu0JrVMdlsdhgxX6TcAD7tJ14BEeff5zDK5T9oGeNXCP1Chqq\nH7nRMrOAId8DGufN8G4swTYRNVu4o3e7oAIigVzPoLLuzZimkQC5rNvu7s0Y\n7zOFzAbB/1o7NbjAPqHMiaeKR2y6PXPfx7R6Jy4HfHiA1U+4+spsjT10f7Px\n8s5OlyK/qOU2SZDRVZ7d7PDO9R+uvZd4gU9MHMYQD95zLdU/lw6oLOEWWuAF\nzrOqzx8oVcvm9127z5CfLQiwXcbj/mzazYxR/wYbSi5uU4kl/5WcrIFVf0ax\nb0gG\r\n=BMor\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d5d3f06c18d46767185044893a482e08f67f851f","scripts":{"format":"webmat && npm run update-types","update-types":"bower install && gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.1.0","description":"A system for animating Polymer-based web components","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"9.8.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.21","@polymer/iron-resizable-behavior":"^3.0.0-pre.21"},"_hasShrinkwrap":false,"devDependencies":{"bower":"^1.8.0","webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.21","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.21","@polymer/iron-icons":"^3.0.0-pre.21","@polymer/paper-item":"^3.0.0-pre.21","@polymer/paper-styles":"^3.0.0-pre.21","@polymer/iron-flex-layout":"^3.0.0-pre.21","@polymer/paper-icon-button":"^3.0.0-pre.21","@polymer/iron-component-page":"^3.0.0-pre.21","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.2.2"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.21_1529716060470_0.538614787754967","host":"s3://npm-registry-packages"}},"3.0.0-pre.22":{"name":"@polymer/neon-animation","version":"3.0.0-pre.22","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.22","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"f872577c41a28686067882dda6668883d6d0eb62","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.22.tgz","fileCount":82,"integrity":"sha512-TVdbvaVEuv4RgtvLF7pnsYrI0MAgIyHgKg+CSNOLF/rmToHczcGqRUrXGa1EOHV43il9mOfprOiTbkb20tBLYQ==","signatures":[{"sig":"MEYCIQDk/cpyb1sQJiB52BFKDV0WgSRpXLW8W+jnjtZM9KywbQIhANJlZ4nUuyJwHMlWf3HFvKNo5WUHMp2moNzXMRGx5q9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgMloCRA9TVsSAnZWagAABMsP/i2gYFBRKVr69bTM15Mh\n5BaFg4LRKsIP1cNCVwrSqU26x251GfvVRxDAmkjUZ4waPi2x159x29N+5R3j\nzxBC3TWjdF+ndjmjbHVDs7/laJfkzeyqWRlaI1ce4/aA2wBtWcxw76z36fqr\nSHJsjBGbFqs1jIneBqd1/UUnS9QhlNjWYpaiuAnpN/SZH32YytXlKsMIPxTk\nZa9PSrQSTRtPykwnJhA0051r+eNpSyLEIYQxfQdauxv6B7NRWt8284PW0x2E\ndQURiy5v2Yx6XLaHbe6AhzF4xCuBTjABR4fjO5KwYtk78LfztcdMylO5k/55\nCS8bUXD3hHYI773NKExjUjNSwcPLGeFoH13ykSG3UTA9m0TPECx4yZrK+fJu\nWSdboc0D/1MzvRt06FBrUIW57U3/bPyplmtVlGkkABjVceA4uJBvyfVRe+NX\nyC/s4VE2d8g5h8ofMawEqMVsyEy4t/DCznwHybdowZYr8gLX19cksu+5l9dI\nw7zdWS7tjEvRL7luX7rPlRNs5rHo/Ww3oZGa532rcOUD6yhq3vNYoMSaL7B2\nxtVS4vunipNHRdHP5wcY7n0kMJ0WSBYgA9RjdHqQn9ZREsJzkMQhQMgd1bbG\nOUEGx4OrHVHM14mbC/ibgcvUfMx+++T+wkz0j0+fv+ZUG2Crhl2bzSeB8PXt\ndjG+\r\n=jRuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"5cb17fc0bedd2d91751973a904e8ab2553395172","scripts":{"format":"webmat","prepack":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir ."},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.0","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.20","@polymer/iron-resizable-behavior":"^3.0.0-pre.20"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.20","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.20","@polymer/iron-icons":"^3.0.0-pre.20","@polymer/paper-item":"^3.0.0-pre.20","@polymer/paper-styles":"^3.0.0-pre.20","@polymer/iron-flex-layout":"^3.0.0-pre.20","@polymer/paper-icon-button":"^3.0.0-pre.20","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.22_1535166823434_0.5494725452026625","host":"s3://npm-registry-packages"}},"3.0.0-pre.23":{"name":"@polymer/neon-animation","version":"3.0.0-pre.23","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.23","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"e19522b8b6ffc40c9cf289825fb97221470646bf","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.23.tgz","fileCount":82,"integrity":"sha512-T16fidyHmHWbs5+k9q8iwrNm6vqyp9kVoFtI4NLpNL+SXNcrU5MLtLAzPV9ZT2vS95JkxyMapLXHaNngIL2w0w==","signatures":[{"sig":"MEUCIQCJIYtchPiT645ghttQ69ZyurhArBwScdBuXfSVCLSM1AIgFKc6XqPoS6HdAW26eEd//krZCxYyJx9gfyaFsPTRjAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgP+LCRA9TVsSAnZWagAAt+UP+QA5s0QzPGZDfBROZkcW\nKRaW4ukSAmo+4wfRuenCPYQ0ZC9OIlqlcA/a0J1gxg1QiTrcmiqPFVLxN3Po\nNj1MhHZMm+GZG5jU+gBvXfwL7UHZuwIgeY001gYSmQik1mx4ZKGNHUafYJm3\n2IcBNsDSzOV4LbStvg4ywPBt1liS+hJ5+wcPkBuBkG77lRrOOPbKVsbgEI8S\nFbS9PATkhNZvF+5xHsmET5xPWqtnjFYYrzxDcDiGFFpDydIES6atPP7oLXj6\nWqieEm5eL4bHC/OAS86aAK8oribAnOhC5+EPgcxw7O0RmwzFT4OsMiMx8SmH\n8EfgG5vcKZ5YYPo5Mlci5G7DP/xKMi9H+fD1WPgQDm24x3djvNSUNtvECAt5\n7sswm2IGBLa5dopwgxNfKkift1jqhMpUvuhADQSyGcjiOt21O0vp9R5/M1I1\nFdDIOffLBcMnVYjwEgqe4+/wkX/0x1Xm66g+z9RL8w0MjtdYCoMkYfkhn7NR\nsShmndfYNLW3Dogm/D6fRzw64MIqJazysYZtmroqiVbgy6BBjcr5mk+2alAF\nOWnoc4a4MfWxXXjjv7QP07Fa+Hdah8jVxgjnzMlDrfGSYYerujraPemgfS3a\nWb1DTdAZgZ2wT3FICDk0c2s1h73FVxjsGj6LaNWh8WXewVPVJeIwSlwZuAbL\ncGCk\r\n=79Is\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"eb243d5287c335b2847ff7155c7a73f919eaf682","scripts":{"format":"webmat","prepack":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.0","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.22","@polymer/iron-resizable-behavior":"^3.0.0-pre.22"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.22","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.22","@polymer/iron-icons":"^3.0.0-pre.22","@polymer/paper-item":"^3.0.0-pre.22","@polymer/paper-styles":"^3.0.0-pre.22","@polymer/iron-flex-layout":"^3.0.0-pre.22","@polymer/paper-icon-button":"^3.0.0-pre.22","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.0"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.23_1535180682736_0.44380130912282567","host":"s3://npm-registry-packages"}},"3.0.0-pre.24":{"name":"@polymer/neon-animation","version":"3.0.0-pre.24","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.24","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"samli","email":"sam@sam.li"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"b5e0757e11c621844c3180ad9540d86d270b75a5","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.24.tgz","fileCount":82,"integrity":"sha512-ztuafoxgbjC2i2OIC1AaASbJfci1hIGiwmEYEKsndYl7DPlsoiGBbX0B26fdV6aW3sCwnEDiM1Sr6CzvBpO2AQ==","signatures":[{"sig":"MEYCIQCGskubi52U0w4sJcCfgSYaARANunew/M8EnF7W2QCRYQIhAKGzfxWZ0m+r9WbpR4pd2bE3mPYTVYDIOzyaVt3ffw+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhgcYCRA9TVsSAnZWagAAHCkP/iYMq/fp7d33vmVqLAcI\nXXNECnZ9SXUTsBrO244GvwPDRb/tVtjUgls471+jQQvbwBKd+cqz9yLXeLmr\noCI0xgmFZptUU+g3wt6L7aJlHWSuVjWwL172I7ePYdWYiFeHVUbXeHEnF2Lv\nzAH+Iet88A/gujAeV9Kvz3SSa6bp0qU9CTFftBHubUUen9Q879a3IacJU5+a\n5shwPDWSEUCSYm+zDVJJ2NuSl5c3hPT5ucJnJWIBwtGuNSqgmakr6SSfY9xv\nlEyFf20h1IrVhhv57YNHKmtg+wRs4NtCyMR7LGp2NWYxCB8Mf1BxCR88kBD1\nIEvJ9NgdehG/RZ2w6HkPFBYx3t+XMiWXe0cKZQst0Iuss3qQgfwZUYD/uoOd\ncgyOgIzLoqtUGKm4t9Yf4SmzTiAk92qAHA12rC1B8BYD215PdHrBRG1lAfTK\nuL4KGgkKUHyaQ/mqEnpsTRj7PlqImiTC9mi9ulR+dua64uh0goktdaEH1mMm\naJTBDYfqebjaCMI2YzdUKqWDaX1NTRxlPQIaOOqhvvhciMlqCo8MprA2eV06\nr1O7skyDQX0n9LFGQ4Ra5/8Rsao6iLIpeUMaH2VcIkah+roGhusPXEDkzaN6\nfqAAmwCAFgloZm5znEJ0ILQ6Aitgy5uVGqwUzNoBYBFRDWmC+/6wbZgOlprb\nLxIW\r\n=KdKZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"66ab92b45e4ed936475bf70ddde2439ab4058f82","scripts":{"format":"webmat","prepack":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.0","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.22","@polymer/iron-resizable-behavior":"^3.0.0-pre.22"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.22","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.22","@polymer/iron-icons":"^3.0.0-pre.22","@polymer/paper-item":"^3.0.0-pre.22","@polymer/paper-styles":"^3.0.0-pre.22","@polymer/iron-flex-layout":"^3.0.0-pre.22","@polymer/paper-icon-button":"^3.0.0-pre.22","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.24_1535510295876_0.7697792185471517","host":"s3://npm-registry-packages"}},"3.0.0-pre.25":{"name":"@polymer/neon-animation","version":"3.0.0-pre.25","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.25","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"samli","email":"sam@sam.li"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"a2bf8ced3c038ec1851aba11c3bf9a8edc14d155","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.25.tgz","fileCount":82,"integrity":"sha512-QX4AkuxC7/vMkf1wRESFFOHRt+GuB0vCa45zidRbCRfSjGILrszimwJ9rOIyLypP14a+pPugqp1SY+lGDGLm0g==","signatures":[{"sig":"MEYCIQDBw4VY8COKlsJ9GhoOSYE4t2dscl7i89VsHaQUgXtcsgIhAPUeqR6KkEjf7QH7jx7CueW6Qmh/8kLTDxpszkdd0pSx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhhhMCRA9TVsSAnZWagAAEBsP/iG6g5I+x+djXRe29Uan\neiTnZ1aTFjDLrqkXnD8O+3YiMUlDOD+WO5NN5XUHgVriDv3IYA7IoqqlwTxv\nKOyI6O/H2GmieD7R0a4oeNpK3cElig15JeNK6l4w+ADQVMvQVOVDC/CJzArM\nxPDlvVIg9HoJhzK4rOSQ5mbkSfIEPtrGLmVPiNk7Xqut/T4l0FlDcmbnAtg4\n6cSVuzIozqiH5QFvKzKsDFUJPzGwCCroy9PQMSzEpqkFcawmTOAGunljJ3SB\n2DmSjiB4mclltuCwaoCKX2WuGcc6nolHx5G4MVR5s/lhrKRu+g3f1auc9XkS\nN44ghRmyFq/TOyBHtZzvghUxLHdZL5p3IlPBj9j/69ny7YV5DYzwH/Vceszw\n4vjCGnuCpb55XIEMc1H8tIAhq2IkewUyt3yolQR8XrW60vhucanU/MqWsgpa\nKPm1deaS376FKRhJj+kyX4NsDrkjEsIuYQ31BF9vC34WPOrJnStHeyXeL/NI\n7WTTYth12TvXrmbsPOZJggupg9RpdIJERvMWnqioJ2FRScM6e7YWNLAnzTnS\nrJn8sVdHAvh+S/SZvjv5O9Waj4FGKkcWETHFQxtfNy/h062uh+E3oCml+Ywr\n6dRSEgDiFwwMSTkP1UK89LKwdmFQQJoiej8rFzE8MJ0ZKTL8A42lo7xa37RN\nprkm\r\n=ALlN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"8da44ac2727fef7d116f25fdb4fafcf540e9c01f","scripts":{"format":"webmat","prepack":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.0","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.24","@polymer/iron-resizable-behavior":"^3.0.0-pre.24"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.24","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.24","@polymer/iron-icons":"^3.0.0-pre.24","@polymer/paper-item":"^3.0.0-pre.24","@polymer/paper-styles":"^3.0.0-pre.24","@polymer/iron-flex-layout":"^3.0.0-pre.24","@polymer/paper-icon-button":"^3.0.0-pre.24","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.25_1535514699687_0.6581438480917372","host":"s3://npm-registry-packages"}},"3.0.0-pre.26":{"name":"@polymer/neon-animation","version":"3.0.0-pre.26","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0-pre.26","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"samli","email":"sam@sam.li"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"6b1a81bb7c4d63b10c40747ee9ae06025e3c869c","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0-pre.26.tgz","fileCount":82,"integrity":"sha512-q13wjn5oCZV2eDB52VsjL/yQluJEwI1zZFPV5WCyS42g34mlZLlibyIKUkSM3CdKIJQB4aLhgm9fE8WMAot/hA==","signatures":[{"sig":"MEQCIHYnwRX/xDW9OwhQao+N2TXKLmGUcaxzs7ZNWvTNcDH3AiA89uauIAivT2E2r01qm586AAwmtTF6eRKcORFo4CtsdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmGXrCRA9TVsSAnZWagAAh+MP/ifE2T+MzeDmZI3leNyN\nkbwrvBSnS44mFqlRwio6n+ksXnB1hqedPp61/8fRRKz543ljcOSGfhke+AbK\nQoV4bnuN39pJSHHlh46hVuEp9I07MPtXGRq2PBYg+ROfYHNEZomS2L+qRq8O\n3ufG4w0SfAXiCkEqFDUVapqBZJiDCNnpto4t5q9ZrkrU7pu4Y5y47D7ASkcw\nWibXGzNK++bnVOf7CSOnKtJuBT7yG1wXJbNoliwz/dGsbJgpU7HNM5fAx/F7\nhKZRqj/z390bZWj8w0bsui3fzrmDEsiEKd+twNqAm7uwr+5HRSB4Ig3qw4Ya\nJVW4WBKS7UVm00K9I88yyWwsj7cilyc9vxgz07f4XBxt1nBjMdcmwCB5yLy8\nAA4VAM2hQFzvKzr8UAlutdECfXkKYF1RxQLdRiUQ4sswYCX6eVNrCn/9n204\neNnVb/WueYjLId6RqIAkt85aBZLnD520894S5b2pFqjk+pec3QyAtuJaDIFi\nGSGFb7+UsoF/+yLOp4IALauKqt+xIwjfLUpv0N16IFmhkk/ogDS6PPmspo94\npB/3XJZnm6DtAuVowQ1PMZJrcTRxVdAEkVd+T4Rb6txXCFrgSTDxlwZneb5v\naEzqkj+jTDF3pgX7iw6fiW1h8QTT3fWTSv00dRs/fkz3lH59fpO8FAHgDTSh\nfZEQ\r\n=RCcy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"19dec297a656aef3db64fc70674c9d51caa4feef","scripts":{"format":"webmat","prepare":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.1","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.25","@polymer/iron-resizable-behavior":"^3.0.0-pre.25"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.25","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.25","@polymer/iron-icons":"^3.0.0-pre.25","@polymer/paper-item":"^3.0.0-pre.25","@polymer/paper-styles":"^3.0.0-pre.25","@polymer/iron-flex-layout":"^3.0.0-pre.25","@polymer/paper-icon-button":"^3.0.0-pre.25","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0-pre.26_1536714218902_0.8993431564227297","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@polymer/neon-animation","version":"3.0.0","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.0","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"samli","email":"sam@sam.li"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"deae21fd2702dc285effb52f66cc7ef825590d72","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.0.tgz","fileCount":82,"integrity":"sha512-Y7AtG1wl6WiKxfATHznCOtwmOv0NF2zK/gpyhFKcrFtTwhY9BdI18MhpAH9tkFfFpcrZdNXioFOjz7iiDibwAg==","signatures":[{"sig":"MEUCIQC7xJgb0wy890ds7MU7Wk7l3BNRjzCJj4UeweboUyvifQIgYgIJbvMtacbeuqLnUMnd1rAYTjcbGKuTqlcM0rNk6YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmd22CRA9TVsSAnZWagAAs+IQAJEbyu1ZVaxqxXHOoTpU\nxyA8pbU4CMzZyGQiwvrvC6roziVZm6algnvQ5hQ5I8x8+XZEa7qNmb0HLY7o\nbGXmAtyVt38mzGFvXvJ9CS99kP/auNpB+EB8uw3rQ2I4TiBcL+WDTpQtC3mh\n7CLUNMaBKJWuyMl7OMfcHF2uVIsp7UqEut+uCVrcM1i3qEg0x8uNUbcvTMJr\n1LFRQAM5uLbYrJpC9SrNQb5GTko3BpAXZm8eU5bXhcqD7YORj83VGFOncjNt\nh7a87EQNe5c/cK4wA9b2y4tMUl7htmzKaG4ejmz5BrdWLNVR2yAl4uIdW/+H\nEEIcgSEpBpDQiEl0oHAw4YhE5G5/wU9utoqIYgqf8q2OGgeSYBSU0+jQIe8S\nZSbupA2oTnxp8PZgax5qNVfmgsJb6ztbkGcUCvA6alJVe5xBLrBE3LywCvj2\nnBfrpMYfi1z3mnBAk4E4a2Ep3bCE81KGh44425bsgjonaTPhkouy3umFcGu7\nGBuEQjuNWrebD8cQrKWjKBpfm4gVWxkeO5UPNSZEI1gXRMMRkJ8Q4VPgqrvs\nmTvkiDdtEW7Sm2kxmkm6bPWIsEry4xqqRGUstN+Qe8Cyy3C2/6baLccikSxz\nWA4XGSDSks6fadUgmyLIhGJv6wcD+fI/bh+V20G3N1WEh+Kzu8QV4KyHiom1\nnWje\r\n=xiyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"0e5b25337ed3942957efff10aa3e6be33b3c8820","scripts":{"format":"webmat","prepare":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.1","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.26","@polymer/iron-resizable-behavior":"^3.0.0-pre.26"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.26","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.26","@polymer/iron-icons":"^3.0.0-pre.26","@polymer/paper-item":"^3.0.0-pre.26","@polymer/paper-styles":"^3.0.0-pre.26","@polymer/iron-flex-layout":"^3.0.0-pre.26","@polymer/paper-icon-button":"^3.0.0-pre.26","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.0_1536810421987_0.10162334230736647","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@polymer/neon-animation","version":"3.0.1","keywords":["web-components","web-component","polymer","web-animations"],"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","_id":"@polymer/neon-animation@3.0.1","maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"samli","email":"sam@sam.li"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"homepage":"https://github.com/PolymerElements/neon-animation","bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"dist":{"shasum":"6658e4b524abc057477772a7473292493d366c24","tarball":"https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.1.tgz","fileCount":83,"integrity":"sha512-cDDc0llpVCe0ATbDS3clDthI54Bc8YwZIeTGGmBJleKOvbRTUC5+ssJmRL+VwVh+VM5FlnQlx760ppftY3uprg==","signatures":[{"sig":"MEUCICgBT2KIOgb40YQJdbgLWzaEayC79z8/GM6MKcHMTAVMAiEAxOzoBt7NYEz5CjEHXSgkU6LcMwBEtjihplnNmFY6yQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2W0iCRA9TVsSAnZWagAAD14P/0Dlaozv/lUPCK3QjTbE\ndrIFDohX6/D8uinVBhPAa49TtaPOHW87+GUDz20khVXq9mBF21mHFQmiTtp5\nQB8TcSs22BYtn5Xls3xgqfIJgbmxOB5J9daziR9snQr4vbsMHYqB7jA/cUdY\nrGBQwVjewe0EmulUDl3VOxZGO85AE/JMf2J1sH8tBvHpL64dQ3IxFAXWFJ1t\n7ppvD86SDL7LJ/kR10D/7VDmpLcY/9AdcVH8i2yEiLJ3Y4OHMY82UTEDSX0Y\n2qK5U3aKxCYzuT50kiorrnv7Pv2DdlQqK94UVHUzZyd0gx4PnmXPEc7bO4N+\nLNcs1u/5bDaHL3mARVS0lvjhRu1IZHkXNyfXi3OoLwGTHH5z3k2a9JwXTfIO\nmppxXQFjAI/03EANqPa49gL7gQrRGe5SK/HQyA8pkj45AXkKshSc4oAIE3jg\nEi+cZFSDD3nmfbVyvitsGn1M+B5V4IAFkhvfPHkB6ZgIfBsNQ7FBW0hsIC3t\nVXG6kucwwX06c45ZK7ZExmnnoqwTJ8YNnWFQ6Dd+50dbLHUqfiHgIoTIDrqD\nlOJtj972Wz5FYr+IFpNuEnOubsnpK528HP5lrBcfvjTeflGfM4ceEWWfU8MV\nuD7EP39mSW3Jke3YOdj+wxX6niJEOH4HhzAja0jvaYXCOblrWI2cG4ZXH67K\newHt\r\n=5uii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"neon-animation.js","gitHead":"86255d0a8920c4872af575144224565e157096df","scripts":{"format":"webmat","prepare":"npm run generate-types","generate-types":"gen-typescript-declarations --deleteExisting --outDir . --verify"},"_npmUser":{"name":"bicknellr","email":"bicknellr@gmail.com"},"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"_npmVersion":"6.4.1","description":"A system for animating Polymer-based web components","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-selector":"^3.0.0-pre.26","@polymer/iron-resizable-behavior":"^3.0.0-pre.26"},"_hasShrinkwrap":false,"devDependencies":{"webmat":"^0.2.0","web-animations-js":"^2.3.1","@polymer/iron-icon":"^3.0.0-pre.26","wct-browser-legacy":"^1.0.1","@polymer/app-layout":"^3.0.0-pre.26","@polymer/iron-icons":"^3.0.0-pre.26","@polymer/paper-item":"^3.0.0-pre.26","@polymer/paper-styles":"^3.0.0-pre.26","@polymer/iron-flex-layout":"^3.0.0-pre.26","@polymer/paper-icon-button":"^3.0.0-pre.26","@webcomponents/webcomponentsjs":"^2.0.0","@polymer/gen-typescript-declarations":"^1.5.1"},"_npmOperationalInternal":{"tmp":"tmp/neon-animation_3.0.1_1536894493162_0.09834820874145023","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-02-02T04:45:22.934Z","modified":"2024-10-07T21:26:25.421Z","0.0.1":"2016-02-02T04:45:22.934Z","0.0.3":"2016-02-03T00:27:37.055Z","0.0.4":"2017-01-06T07:31:29.953Z","1.2.4-pre.1":"2017-01-19T01:33:21.236Z","1.2.4-pre.2":"2017-01-20T23:25:20.343Z","1.2.4-pre.3":"2017-01-24T00:22:05.627Z","3.0.0-pre.1":"2017-12-06T01:50:19.376Z","3.0.0-pre.4":"2018-01-17T19:55:16.558Z","3.0.0-pre.6":"2018-01-24T23:03:49.898Z","3.0.0-pre.7":"2018-01-30T18:48:42.694Z","3.0.0-pre.8":"2018-02-07T18:56:41.601Z","3.0.0-pre.10":"2018-02-22T23:15:36.597Z","3.0.0-pre.11":"2018-03-09T01:17:21.234Z","3.0.0-pre.12":"2018-03-22T16:57:11.253Z","3.0.0-pre.13":"2018-05-01T22:57:18.536Z","3.0.0-pre.14":"2018-05-02T00:37:53.090Z","3.0.0-pre.15":"2018-05-02T20:55:19.605Z","3.0.0-pre.16":"2018-05-04T20:18:53.529Z","3.0.0-pre.17":"2018-05-08T05:08:59.571Z","3.0.0-pre.18":"2018-05-09T10:01:44.675Z","3.0.0-pre.19":"2018-05-09T20:22:16.076Z","3.0.0-pre.20":"2018-06-23T00:19:47.114Z","3.0.0-pre.21":"2018-06-23T01:07:40.573Z","3.0.0-pre.22":"2018-08-25T03:13:43.603Z","3.0.0-pre.23":"2018-08-25T07:04:42.804Z","3.0.0-pre.24":"2018-08-29T02:38:16.035Z","3.0.0-pre.25":"2018-08-29T03:51:39.819Z","3.0.0-pre.26":"2018-09-12T01:03:39.053Z","3.0.0":"2018-09-13T03:47:02.111Z","3.0.1":"2018-09-14T03:08:13.303Z"},"bugs":{"url":"https://github.com/PolymerElements/neon-animation/issues"},"author":{"name":"The Polymer Authors"},"license":"BSD-3-Clause","homepage":"https://github.com/PolymerElements/neon-animation","keywords":["web-components","web-component","polymer","web-animations"],"repository":{"url":"git://github.com/PolymerElements/neon-animation.git","type":"git"},"description":"A system for animating Polymer-based web components","maintainers":[{"email":"rictic@gmail.com","name":"rictic"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"sorvell@google.com","name":"sorvell"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"brendan@usergenic.com","name":"usergenic"},{"email":"admin@polymer-project.org","name":"polymer-devs"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"kevinpschaaf@gmail.com","name":"kevinpschaaf"},{"email":"justin@fagnani.com","name":"justinfagnani"}],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@polymer/neon-animation.svg)](https://www.npmjs.com/package/@polymer/neon-animation)\n[![Build status](https://travis-ci.org/PolymerElements/neon-animation.svg?branch=master)](https://travis-ci.org/PolymerElements/neon-animation)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/neon-animation)\n\n## neon-animation\n\n`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.\n\nSee: [Documentation](https://www.webcomponents.org/element/@polymer/neon-animation),\n  [Demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/index.html).\n\n_See [the guide](./guide.md) for detailed usage._\n\n## Usage\n\n### Installation\n\nElement:\n```\nnpm install --save @polymer/neon-animation\n```\n\nPolyfill:\n```\nnpm install --save web-animations-js\n```\n\n### In an HTML file\n\n### `NeonAnimatableBehavior`\nElements that can be animated by `NeonAnimationRunnerBehavior` should implement the `NeonAnimatableBehavior` behavior, or `NeonAnimationRunnerBehavior` if they're also responsible for running an animation.\n\n#### In a Polymer 3 element\n```js\nimport {PolymerElement, html} from '@polymer/polymer';\nimport {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';\nimport {NeonAnimatableBehavior} from '@polymer/neon-animation/neon-animatable-behavior.js';\n\nclass SampleElement extends mixinBehaviors([NeonAnimatableBehavior], PolymerElement) {\n  static get template() {\n    return html`\n      <style>\n        :host {\n          display: block;\n        }\n      </style>\n\n      <slot></slot>\n    `;\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n### `NeonAnimationRunnerBehavior`\n\n#### In a Polymer 3 element\n```js\nimport {PolymerElement, html} from '@polymer/polymer';\nimport {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';\nimport {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';\nimport '@polymer/neon-animation/animations/scale-down-animation.js';\n\nclass SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {\n  static get template() {\n    return html`\n      <div>this entire element will be animated after one second</div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // must be set here because properties is static and cannot reference \"this\"\n    this.animationConfig = {\n      // provided by neon-animation/animations/scale-down-animation.js\n      name: 'scale-down-animation',\n      node: this,\n    };\n\n    setTimeout(() => this.playAnimation(), 1000);\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n### `<neon-animatable>`\nA simple element that implements NeonAnimatableBehavior.\n\n#### In an html file\n```html\n<html>\n  <head>\n  </head>\n  <body>\n    <neon-animatable id=\"animatable\">\n      <div>this entire element and its parent will be animated after one second</div>\n    </neon-animatable>\n    <runner-element></runner-element>\n    <script type=\"module\">\n      import {PolymerElement} from '@polymer/polymer';\n      import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';\n      import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';\n      import '@polymer/neon-animation/neon-animatable.js';\n      import '@polymer/neon-animation/animations/scale-down-animation.js';\n\n      const animatable = document.getElementById('animatable');\n\n      class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {\n        connectedCallback() {\n          super.connectedCallback();\n\n          this.animationConfig = {\n            // provided by neon-animation/animations/scale-down-animation.js\n            name: 'scale-down-animation',\n            // node is node to animate\n            node: animatable,\n          }\n\n          setTimeout(() => this.playAnimation(), 1000);\n        }\n      }\n      customElements.define('runner-element', SampleElement);\n    </script>\n  </body>\n</html>\n```\n\n#### In a Polymer 3 element\n```js\nimport {PolymerElement, html} from '@polymer/polymer';\nimport {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';\nimport {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';\nimport '@polymer/neon-animation/neon-animatable.js';\nimport '@polymer/neon-animation/animations/scale-down-animation.js';\n\nclass SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {\n  static get template() {\n    return html`\n      <div>this div will not be animated</div>\n      <neon-animatable id=\"animatable\">\n        <div>this div and its parent will be animated after one second</div>\n      </neon-animatable>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // must be set here because properties is static and cannot reference \"this\"\n    this.animationConfig = {\n      // provided by neon-animation/animations/scale-down-animation.js\n      name: 'scale-down-animation',\n      node: this.$.animatable,\n    };\n\n    setTimeout(() => this.playAnimation(), 1000);\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n### `<neon-animated-pages>`\n`neon-animated-pages` manages a set of pages and runs an animation when\nswitching between them.\n\n#### In an html file\n```html\n<html>\n  <head>\n    <script type=\"module\">\n      import '@polymer/neon-animation/neon-animated-pages.js';\n      import '@polymer/neon-animation/neon-animatable.js';\n      import '@polymer/neon-animation/animations/slide-from-right-animation.js';\n      import '@polymer/neon-animation/animations/slide-left-animation.js';\n    </script>\n  </head>\n  <body>\n    <neon-animated-pages\n        id=\"pages\"\n        selected=\"0\"\n        entry-animation=\"slide-from-right-animation\"\n        exit-animation=\"slide-left-animation\">\n      <neon-animatable>1</neon-animatable>\n      <neon-animatable>2</neon-animatable>\n      <neon-animatable>3</neon-animatable>\n      <neon-animatable>4</neon-animatable>\n      <neon-animatable>5</neon-animatable>\n    </neon-animated-pages>\n    <button onclick=\"increase()\">+</button>\n    <button onclick=\"decrease()\">-</button>\n    <script>\n      const pages = document.getElementById('pages');\n      function increase() { pages.selected = pages.selected + 1 % 5; };\n      function decrease() { pages.selected = (pages.selected - 1 + 5) % 5; };\n    </script>\n  </body>\n</html>\n```\n\n#### In a Polymer 3 element\n```js\nimport {PolymerElement, html} from '@polymer/polymer';\nimport '@polymer/neon-animation/neon-animated-pages.js';\nimport '@polymer/neon-animation/neon-animatable.js';\nimport '@polymer/neon-animation/animations/slide-from-right-animation.js';\nimport '@polymer/neon-animation/animations/slide-left-animation.js';\n\nclass SampleElement extends PolymerElement {\n  static get template() {\n    return html`\n      <neon-animated-pages\n          id=\"pages\"\n          selected=\"0\"\n          entry-animation=\"slide-from-right-animation\"\n          exit-animation=\"slide-left-animation\">\n        <neon-animatable>1</neon-animatable>\n        <neon-animatable>2</neon-animatable>\n        <neon-animatable>3</neon-animatable>\n        <neon-animatable>4</neon-animatable>\n        <neon-animatable>5</neon-animatable>\n      </neon-animated-pages>\n      <button on-click=\"increase\">+</button>\n      <button on-click=\"decrease\">-</button>\n    `;\n  }\n\n  increase() {\n    this.$.pages.selected = this.$.pages.selected + 1 % 5;\n  }\n\n  decrease() {\n    this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5;\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n#### In a Polymer 3 element\n```js\nimport {PolymerElement, html} from '@polymer/polymer';\nimport {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';\nimport {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';\nimport '@polymer/neon-animation/animations/neon-animatable.js';\nimport '@polymer/neon-animation/animations/scale-down-animation.js';\n\nclass SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {\n  static get template() {\n    return html`\n      <div>this div will not be animated</div>\n      <neon-animatable id=\"animatable\">\n        <div>this div and its parent will be animated after one second</div>\n      </neon-animatable>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // must be set here because properties is static and cannot reference \"this\"\n    this.animationConfig = {\n      // provided by neon-animation/animations/scale-down-animation.js\n      name: 'scale-down-animation',\n      node: this.$.animatable,\n    };\n\n    setTimeout(() => this.playAnimation(), 1000);\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n## Contributing\nIf you want to send a PR to this element, here are\nthe instructions for running the tests and demo locally:\n\n### Installation\n```sh\ngit clone https://github.com/PolymerElements/neon-animation\ncd neon-animation\nnpm install\nnpm install -g polymer-cli\n```\n\n### Running the demo locally\n```sh\npolymer serve --npm\nopen http://127.0.0.1:<port>/demo/\n```\n\n### Running the tests\n```sh\npolymer test --npm\n```","readmeFilename":"README.md"}