neon-animation is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using Web Animations. Please note that these elements do not include the web-animations polyfill.
Elements that can be animated by NeonAnimationRunnerBehavior should implement the NeonAnimatableBehavior behavior, or if they're also responsible for running an animation.
NeonAnimationRunnerBehavior
In a Polymer 3 element
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`
<style>
:host {
display: block;
}
</style>
<slot></slot>
`;
}
}
customElements.define('sample-element', SampleElement);
NeonAnimationRunnerBehavior
In a Polymer 3 element
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`
<div>this entire element will be animated after one second</div>
`;
}
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);
<neon-animatable>
A simple element that implements NeonAnimatableBehavior.
In an html file
<html>
<head>
</head>
<body>
<neon-animatable id="animatable">
<div>this entire element and its parent will be animated after one second</div>
</neon-animatable>
<runner-element></runner-element>
<script type="module">
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);
</script>
</body>
</html>
In a Polymer 3 element
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`
<div>this div will not be animated</div>
<neon-animatable id="animatable">
<div>this div and its parent will be animated after one second</div>
</neon-animatable>
`;
}
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>
neon-animated-pages manages a set of pages and runs an animation when
switching between them.
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`
<div>this div will not be animated</div>
<neon-animatable id="animatable">
<div>this div and its parent will be animated after one second</div>
</neon-animatable>
`;
}
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:
