https://github.com/polymerelements/neon-animation
Polymer + Web Animations
https://github.com/polymerelements/neon-animation
Last synced: about 1 year ago
JSON representation
Polymer + Web Animations
- Host: GitHub
- URL: https://github.com/polymerelements/neon-animation
- Owner: PolymerElements
- Created: 2015-05-09T01:39:59.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T14:04:07.000Z (over 2 years ago)
- Last Synced: 2025-05-16T03:05:41.792Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/PolymerElements/neon-animation
- Size: 573 KB
- Stars: 143
- Watchers: 30
- Forks: 94
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
⚠️ **neon-animation is deprecated** ⚠️
Please use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) or [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) instead. See [*An Update on Neon Animation*](https://www.polymer-project.org/blog/2017-07-12-an-update-on-neon-animation) for more information.
[](https://www.npmjs.com/package/@polymer/neon-animation)
[](https://travis-ci.org/PolymerElements/neon-animation)
[](https://webcomponents.org/element/@polymer/neon-animation)
## neon-animation
`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.
See: [Documentation](https://www.webcomponents.org/element/@polymer/neon-animation),
[Demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/index.html).
_See [the guide](./guide.md) for detailed usage._
## Usage
### Installation
Element:
```
npm install --save @polymer/neon-animation
```
Polyfill:
```
npm install --save web-animations-js
```
### In an HTML file
### `NeonAnimatableBehavior`
Elements that can be animated by `NeonAnimationRunnerBehavior` should implement the `NeonAnimatableBehavior` behavior, or `NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimatableBehavior} from '@polymer/neon-animation/neon-animatable-behavior.js';
class SampleElement extends mixinBehaviors([NeonAnimatableBehavior], PolymerElement) {
static get template() {
return html`
:host {
display: block;
}
`;
}
}
customElements.define('sample-element', SampleElement);
```
### `NeonAnimationRunnerBehavior`
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
static get template() {
return html`
this entire element will be animated after one second
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
### ``
A simple element that implements NeonAnimatableBehavior.
#### In an html file
```html
this entire element and its parent will be animated after one second
import {PolymerElement} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
const animatable = document.getElementById('animatable');
class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
connectedCallback() {
super.connectedCallback();
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
// node is node to animate
node: animatable,
}
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('runner-element', SampleElement);
```
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
static get template() {
return html`
this div will not be animated
this div and its parent will be animated after one second
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this.$.animatable,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
### ``
`neon-animated-pages` manages a set of pages and runs an animation when
switching between them.
#### In an html file
```html
import '@polymer/neon-animation/neon-animated-pages.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/slide-from-right-animation.js';
import '@polymer/neon-animation/animations/slide-left-animation.js';
1
2
3
4
5
+
-
const pages = document.getElementById('pages');
function increase() { pages.selected = pages.selected + 1 % 5; };
function decrease() { pages.selected = (pages.selected - 1 + 5) % 5; };
```
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/neon-animation/neon-animated-pages.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/slide-from-right-animation.js';
import '@polymer/neon-animation/animations/slide-left-animation.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
1
2
3
4
5
+
-
`;
}
increase() {
this.$.pages.selected = this.$.pages.selected + 1 % 5;
}
decrease() {
this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5;
}
}
customElements.define('sample-element', SampleElement);
```
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/animations/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
static get template() {
return html`
this div will not be animated
this div and its parent will be animated after one second
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this.$.animatable,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/neon-animation
cd neon-animation
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```