Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Polymer 1.0 Neon Animations
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
Configuration:
```
{
name: 'fade-in-animation',
node: <node>
color: <color of flash>
}
```
-->
<script>
Polymer({
is: 'flash-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'backgroundColor': config.color || '#FFF'},
{'backgroundColor': 'initial'}
], {duration: 500});
return this._effect;
}
});
</script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
Configuration:
```
{
name: 'fade-in-animation',
node: <node>
color: <color of flash>
}
```
-->
<script>
Polymer({
is: 'shake-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'left': '-8'},
{'left': '8'},
{'left': '-2'},
{'left': '2'},
{'left': '-1'},
{'left': '1'}
], {duration: 500});
return this._effect;
}
});
</script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
Configuration:
```
{
name: 'fade-in-animation',
node: <node>,
color: <color of flash>,
style: <top|margin-top>
}
```
-->
<script>
Polymer({
is: 'slide-in-down-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
/* For some reason just passing
the style sting would not work */
getEffectUsingTop: function(node) {
return new KeyframeEffect(node, [
{'top': -20, 'opacity': 0},
{'top': 7},
{'top': 0, 'opacity': 1}
], {duration: 500, ease: "cubic-bezier(0,0,0.85,1)" });
return effect;
},
getEffectUsingMargin: function(node) {
return new KeyframeEffect(node, [
{'margin-top': -20, 'opacity': 0},
{'margin-top': 7},
{'margin-top': 0, 'opacity': 1}
], {duration: 500, ease: "cubic-bezier(0,0,0.85,1)" });
},
configure: function(config) {
var node = config.node;
var attrib = config.attrib;
if (attrib == "top") {
this._effect = this.getEffectUsingTop(node);
console.log("using top")
} else {
this._effect = this.getEffectUsingMargin(node);
}
return this._effect;
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment