{"id":15937658,"url":"https://github.com/polymerelements/neon-animation","last_synced_at":"2025-05-16T03:05:50.000Z","repository":{"id":31744172,"uuid":"35310228","full_name":"PolymerElements/neon-animation","owner":"PolymerElements","description":"Polymer + Web Animations","archived":false,"fork":false,"pushed_at":"2023-10-16T14:04:07.000Z","size":587,"stargazers_count":143,"open_issues_count":59,"forks_count":94,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-16T03:05:41.792Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/PolymerElements/neon-animation","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PolymerElements.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-05-09T01:39:59.000Z","updated_at":"2025-02-28T11:05:39.000Z","dependencies_parsed_at":"2024-06-18T12:29:32.757Z","dependency_job_id":"e29ffb4a-c321-4dcd-bdb7-6d7f0ce40d65","html_url":"https://github.com/PolymerElements/neon-animation","commit_stats":{"total_commits":257,"total_committers":44,"mean_commits":5.840909090909091,"dds":0.7392996108949417,"last_synced_commit":"6fc37a4c1b8834fff00772d2369ae89a89233597"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Fneon-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Fneon-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Fneon-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Fneon-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PolymerElements","download_url":"https://codeload.github.com/PolymerElements/neon-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-07T05:04:28.357Z","updated_at":"2025-05-16T03:05:44.991Z","avatar_url":"https://github.com/PolymerElements.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"⚠️ **neon-animation is deprecated** ⚠️\n\nPlease use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) or [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) instead. See [*An Update on Neon Animation*](https://www.polymer-project.org/blog/2017-07-12-an-update-on-neon-animation) for more information.\n\n[![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      \u003cstyle\u003e\n        :host {\n          display: block;\n        }\n      \u003c/style\u003e\n\n      \u003cslot\u003e\u003c/slot\u003e\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      \u003cdiv\u003ethis entire element will be animated after one second\u003c/div\u003e\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(() =\u003e this.playAnimation(), 1000);\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n### `\u003cneon-animatable\u003e`\nA simple element that implements NeonAnimatableBehavior.\n\n#### In an html file\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cneon-animatable id=\"animatable\"\u003e\n      \u003cdiv\u003ethis entire element and its parent will be animated after one second\u003c/div\u003e\n    \u003c/neon-animatable\u003e\n    \u003crunner-element\u003e\u003c/runner-element\u003e\n    \u003cscript type=\"module\"\u003e\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(() =\u003e this.playAnimation(), 1000);\n        }\n      }\n      customElements.define('runner-element', SampleElement);\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\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      \u003cdiv\u003ethis div will not be animated\u003c/div\u003e\n      \u003cneon-animatable id=\"animatable\"\u003e\n        \u003cdiv\u003ethis div and its parent will be animated after one second\u003c/div\u003e\n      \u003c/neon-animatable\u003e\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(() =\u003e this.playAnimation(), 1000);\n  }\n}\ncustomElements.define('sample-element', SampleElement);\n```\n\n### `\u003cneon-animated-pages\u003e`\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\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\"\u003e\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    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cneon-animated-pages\n        id=\"pages\"\n        selected=\"0\"\n        entry-animation=\"slide-from-right-animation\"\n        exit-animation=\"slide-left-animation\"\u003e\n      \u003cneon-animatable\u003e1\u003c/neon-animatable\u003e\n      \u003cneon-animatable\u003e2\u003c/neon-animatable\u003e\n      \u003cneon-animatable\u003e3\u003c/neon-animatable\u003e\n      \u003cneon-animatable\u003e4\u003c/neon-animatable\u003e\n      \u003cneon-animatable\u003e5\u003c/neon-animatable\u003e\n    \u003c/neon-animated-pages\u003e\n    \u003cbutton onclick=\"increase()\"\u003e+\u003c/button\u003e\n    \u003cbutton onclick=\"decrease()\"\u003e-\u003c/button\u003e\n    \u003cscript\u003e\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    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\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      \u003cneon-animated-pages\n          id=\"pages\"\n          selected=\"0\"\n          entry-animation=\"slide-from-right-animation\"\n          exit-animation=\"slide-left-animation\"\u003e\n        \u003cneon-animatable\u003e1\u003c/neon-animatable\u003e\n        \u003cneon-animatable\u003e2\u003c/neon-animatable\u003e\n        \u003cneon-animatable\u003e3\u003c/neon-animatable\u003e\n        \u003cneon-animatable\u003e4\u003c/neon-animatable\u003e\n        \u003cneon-animatable\u003e5\u003c/neon-animatable\u003e\n      \u003c/neon-animated-pages\u003e\n      \u003cbutton on-click=\"increase\"\u003e+\u003c/button\u003e\n      \u003cbutton on-click=\"decrease\"\u003e-\u003c/button\u003e\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      \u003cdiv\u003ethis div will not be animated\u003c/div\u003e\n      \u003cneon-animatable id=\"animatable\"\u003e\n        \u003cdiv\u003ethis div and its parent will be animated after one second\u003c/div\u003e\n      \u003c/neon-animatable\u003e\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(() =\u003e 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:\u003cport\u003e/demo/\n```\n\n### Running the tests\n```sh\npolymer test --npm\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymerelements%2Fneon-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolymerelements%2Fneon-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymerelements%2Fneon-animation/lists"}