RubyGems - jekyll-polymer-magazine - Versions diffs - 0.1.0 - Mend

jekyll-polymer-magazine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (994) hide show

data/assets/bower_components/iron-validatable-behavior/test/cats-only.html ADDED

@@ -0,0 +1,30 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../iron-validator-behavior/iron-validator-behavior.html">
+<script>
+  Polymer({
+    is: 'cats-only',
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+    validate: function(value) {
+      return value === 'cats';
+    }
+  });
+</script>

data/assets/bower_components/iron-validatable-behavior/test/dogs-only.html ADDED

@@ -0,0 +1,30 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../iron-validator-behavior/iron-validator-behavior.html">
+<script>
+  Polymer({
+    is: 'dogs-only',
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+    validate: function(value) {
+      return value === 'dogs';
+    }
+  });
+</script>

data/assets/bower_components/iron-validatable-behavior/test/index.html ADDED

@@ -0,0 +1,32 @@
+<!DOCTYPE html><!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+--><html><head>
+    <title>iron-validatable-behavior tests</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      /* no tests */
+      WCT.loadSuites([
+        'iron-validatable-behavior.html',
+        'iron-validatable-behavior.html?dom=shadow'
+      ]);
+    </script>
+</body></html>

data/assets/bower_components/iron-validatable-behavior/test/iron-validatable-behavior.html ADDED

@@ -0,0 +1,88 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>iron-validatable-behavior tests</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="test-validatable.html">
+  <link rel="import" href="cats-only.html">
+  <link rel="import" href="dogs-only.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <test-validatable></test-validatable>
+    </template>
+  </test-fixture>
+  <test-fixture id="validators">
+    <template>
+      <cats-only></cats-only>
+      <dogs-only></dogs-only>
+      <test-validatable></test-validatable>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('setting `invalid` sets `aria-invalid=true`', function() {
+        var node = fixture('basic');
+        node.invalid = true;
+        assert.equal(node.getAttribute('aria-invalid'), 'true', 'aria-invalid is set');
+        node.invalid = false;
+        assert.isFalse(node.hasAttribute('aria-invalid'), 'aria-invalid is unset');
+      });
+      test('validate() is true if a validator isn\'t set', function() {
+        var node = fixture('basic');
+        var valid = node.validate();
+        assert.isTrue(valid);
+      });
+      test('changing the validator works', function() {
+        var node = fixture('validators');
+        var input = node[2];
+        // Initially there's no validator, so everything is valid.
+        assert.isTrue(input.validate(''));
+        assert.isTrue(input.validate('cats'));
+        // Only valid if the value is 'cats'.
+        input.validator = 'cats-only';
+        assert.isFalse(input.validate('ca'));
+        assert.isTrue(input.validate('cats'));
+        // Only valid if the value is 'dogs'.
+        input.validator = 'dogs-only';
+        assert.isFalse(input.validate('cats'));
+        assert.isTrue(input.validate('dogs'));
+      });
+    });
+  </script>
+</body>

data/assets/bower_components/iron-validatable-behavior/test/test-validatable.html ADDED

@@ -0,0 +1,29 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../iron-validatable-behavior.html">
+<dom-module id="test-validatable">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'test-validatable',
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ]
+  });
+</script>

data/assets/bower_components/neon-animation/.bower.json ADDED

@@ -0,0 +1,61 @@
+{
+  "name": "neon-animation",
+  "description": "A system for animating Polymer-based web components",
+  "version": "1.2.4",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "web-animations"
+  ],
+  "main": [
+    "neon-animated-pages.html",
+    "neon-animatable-behavior.html",
+    "neon-animation-behavior.html",
+    "neon-animation-runner-behavior.html",
+    "neon-shared-element-animatable-behavior.html",
+    "neon-shared-element-animation-behavior.html",
+    "neon-animatable.html",
+    "neon-animations.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/neon-animation"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/neon-animation",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.1.0",
+    "iron-meta": "PolymerElements/iron-meta#^1.0.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
+    "web-animations-js": "web-animations/web-animations-js#^2.2.0"
+  },
+  "devDependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
+  },
+  "_release": "1.2.4",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.2.4",
+    "commit": "bd4f50c9a84023363e80513e10456a18232b21a7"
+  },
+  "_source": "https://github.com/PolymerElements/neon-animation.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/neon-animation"
+}

data/assets/bower_components/neon-animation/.github/ISSUE_TEMPLATE.md ADDED

@@ -0,0 +1,33 @@
+<!-- Instructions: https://github.com/PolymerElements/neon-animation/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+### Expected outcome
+<!-- Example: The page stays the same color. -->
+### Actual outcome
+<!-- Example: The page turns pink. -->
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+### Steps to reproduce
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10

data/assets/bower_components/neon-animation/.gitignore ADDED

	@@ -0,0 +1 @@
1	+ bower_components

data/assets/bower_components/neon-animation/.travis.yml ADDED

@@ -0,0 +1,23 @@
+language: node_js
+sudo: required
+node_js: stable
+addons:
+  firefox: '46.0'
+  apt:
+    sources:
+    - google-chrome
+    packages:
+    - google-chrome-stable
+  sauce_connect: true
+before_script:
+- npm install -g bower polylint web-component-tester
+- bower install
+- polylint
+script:
+- xvfb-run wct
+- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
+env:
+  global:
+  - secure: coZBjQTrTsejOS2utVzo0hhyYRF40H2KoN30G44tRxVKV/0orSm1HJbvG2YDb/tmAFtEObJmNlYonu1I3G9RVncn9y69nRf8BjLHrpOIhNvesug7kPUuprj5KRoLo9O0UyIYmUh6i4YGt1aAeR/Wq/XVifSNIXnAVguzntbSmqvWJdqj8+FHmNzyo5269+tnOzTruXByrUcSZnvNgHjCYFZOY00a29cyK6fTdd0Qbzi9cvhEDfx1j6uXzYah7bdA8caunW1HvxwI+jiV8yEVySB7eku+SHA+8JJUIIZEL1iCASAqqVbTUoOxtfgbTXQRJdVAuDNj1J+AqFVtuJpJl4xvX97dF9FVQvgyLW9fpeb7rojdU0TSazBpVi7LLvocQjofp8bbAtbJ8Z0BN+/3DgM33uDTF8DeBGj2WmR+49F2oPnYh7FwjhbiOVqkOKyolqrRpK0PYczVdHusR6+cONkGcLzO9G5nakWzE9diJSW+nw9qD3bVL99ZzHK+6U7+R75KJdxj0V7VA1lkvWRlchxXrpsEoM0AQEUf97LsvkTpXPQ4Wf9XkCxFRAicSTeDijLCPy3ti0L6D6x9sBZwV5d3ODnkdxCAy2aY7g2YEWuuBDZC+W1ggQ3Xe705GwbBNk22HikA6XOVX9lb3xm7SnenfDGkFhNDzRijoGg96jU=
+  - secure: hJ6VMaJqDh5HPdeERIqoOcdWZJTAOTeS/Lr6FLCWEOOvYPxwRi/L1pKbVuYf2ugeS2Z0TEvAS7RdfjRuC+NGFhsmpnpBlxAyJhVKcXrhHKVtoFK04xaCD2wDMkPaZiDZQRGF/H6/PyuoB4Tqss3aN/DC9eSMwY9HFfoeYRIwiJeb8Kq09pBtvoxU151VQt+jlmyCVw7rhNDTAazaCGKicgvbAtxSJ6xNswNfqOrtCYB+WW5CpUE+qqTjjbistSQJu3hjk2UwFMLJZXtJWdkcD88vNdHy3mtNZQNtE8x+ckNVqgJ98DyAN7HLUU0GvzTOiOGFfwr+bpl6Td8klR2YoQOW4ypluAetcDN9X7tKOxDQaaI8AyPLXPWi9JcESEGAeLzpfkWZ6clrQmqfLdVDsqYKPldF9m7Ozjdhq40r3qFdQAdEI29dBOKOalaZXgWnvU2wu5FBtWnBMSk89zOYC5wGR0E+wOMMMRu90LuMQY40Myhqso5iUFL5qhrn41I8ZfFi0EyOgEeKzYH3zrdo7/msEkCXxI0SKfG1CGSQSOT2luO6Xu6xIuf7qoWYKJiJQ40ObsRKn0cA4GQpNZe/dgKMRH2zzfKW6d2BSAsZGTDJG14XcDi9d/zz7djgboMjc/A6sH8L3c8BkbUa4wuyJRNu7VBZQHq5yrnHpxC6SbA=
+dist: trusty

data/assets/bower_components/neon-animation/CONTRIBUTING.md ADDED

@@ -0,0 +1,77 @@
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+You can however override the jsbin link with one that's customized to this
+specific element:
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+# Polymer Elements
+## Guide for Contributors
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+### Filing Issues
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+**If you are filing an issue to report a bug**, please provide:
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+ ## Expected outcome
+ The page stays the same color.
+ ## Actual outcome
+ The page turns pink.
+ ## Steps to reproduce
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+### Submitting Pull Requests
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+When submitting pull requests, please provide:
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+ ```markdown
+ (For a single issue)
+ Fixes #20
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

data/assets/bower_components/neon-animation/README.md ADDED

@@ -0,0 +1,306 @@
+# 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/).
+*Warning: The API may change.*
+* [A basic animatable element](#basic)
+* [Animation configuration](#configuration)
+  * [Animation types](#configuration-types)
+  * [Configuration properties](#configuration-properties)
+  * [Using multiple animations](#configuration-multiple)
+  * [Running animations encapsulated in children nodes](#configuration-encapsulation)
+* [Page transitions](#page-transitions)
+  * [Shared element animations](#shared-element)
+  * [Declarative page transitions](#declarative-page)
+* [Included animations](#animations)
+* [Demos](#demos)
+<a name="basic"></a>
+## A basic animatable element
+Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
+```js
+Polymer({
+  is: 'my-animatable',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    animationConfig: {
+      value: function() {
+        return {
+          // provided by neon-animation/animations/scale-down-animation.html
+          name: 'scale-down-animation',
+          node: this
+        }
+      }
+    }
+  },
+  listeners: {
+    // this event is fired when the animation finishes
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  animate: function() {
+    // run scale-down-animation
+    this.playAnimation();
+  },
+  _onNeonAnimationFinish: function() {
+    console.log('animation done!');
+  }
+});
+```
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
+<a name="configuration"></a>
+## Animation configuration
+<a name="configuration-types"></a>
+### Animation types
+An 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.
+```js
+Polymer({
+  is: 'my-dialog',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    opened: {
+      type: Boolean
+    },
+    animationConfig: {
+      value: function() {
+        return {
+          'entry': {
+            // provided by neon-animation/animations/scale-up-animation.html
+            name: 'scale-up-animation',
+            node: this
+          },
+          'exit': {
+            // provided by neon-animation/animations/fade-out-animation.html
+            name: 'fade-out-animation',
+            node: this
+          }
+        }
+      }
+    }
+  },
+  listeners: {
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  show: function() {
+    this.opened = true;
+    this.style.display = 'inline-block';
+    // run scale-up-animation
+    this.playAnimation('entry');
+  },
+  hide: function() {
+    this.opened = false;
+    // run fade-out-animation
+    this.playAnimation('exit');
+  },
+  _onNeonAnimationFinish: function() {
+    if (!this.opened) {
+      this.style.display = 'none';
+    }
+  }
+});
+```
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
+You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
+```js
+properties: {
+  entryAnimation: {
+    value: 'scale-up-animation'
+  },
+  exitAnimation: {
+    value: 'fade-out-animation'
+  }
+}
+```
+<a name="configuration-properties"></a>
+### Configuration properties
+You can pass additional parameters to configure an animation in the animation configuration object.
+All animations should accept the following properties:
+ * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
+ * `node`: The target node to apply the animation to. Defaults to `this`.
+ * `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
+ properties include the following:
+     * `duration`: The duration of the animation in milliseconds.
+     * `delay`: The delay before the start of the animation in milliseconds.
+     * `easing`: A timing function for the animation. Matches the CSS timing function values.
+Animations may define additional configuration properties and they are listed in their documentation.
+<a name="configuration-multiple"></a>
+### Using multiple animations
+Set the animation configuration to an array to combine animations, like this:
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // fade-in-animation is run with a 50ms delay from slide-down-animation
+      'entry': [{
+        name: 'slide-down-animation',
+        node: this
+      }, {
+        name: 'fade-in-animation',
+        node: this,
+        timing: {delay: 50}
+      }]
+    }
+  }
+}
+```
+<a name="configuration-encapsulation"></a>
+### Running animations encapsulated in children nodes
+You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable
+      'entry': [
+        {name: 'fade-in-animation', node: this},
+        {animatable: this.$.myAnimatable, type: 'entry'}
+      ]
+    }
+  }
+}
+```
+<a name="page-transitions"></a>
+## Page transitions
+*The artist formerly known as `<core-animated-pages>`*
+The `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.
+<a name="shared-element"></a>
+### Shared element animations
+Shared 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.
+In the incoming page:
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the incoming page defines the 'entry' animation
+        'entry': {
+          name: 'hero-animation',
+          id: 'hero',
+          toPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.hero
+      }
+    }
+  }
+}
+```
+In the outgoing page:
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the outgoing page defines the 'exit' animation
+        'exit': {
+          name: 'hero-animation',
+          id: 'hero',
+          fromPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.otherHero
+      }
+    }
+  }
+}
+```
+<a name="declarative-page"></a>
+### Declarative page transitions
+For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
+For example:
+```js
+<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
+  <neon-animatable>1</neon-animatable>
+  <neon-animatable>2</neon-animatable>
+  <neon-animatable>3</neon-animatable>
+  <neon-animatable>4</neon-animatable>
+  <neon-animatable>5</neon-animatable>
+</neon-animated-pages>
+```
+The new page will slide in from the right, and the old page slide away to the left.
+<a name="animations"></a>
+## Included animations
+Single element animations:
+ * `fade-in-animation` Animates opacity from `0` to `1`;
+ * `fade-out-animation` Animates opacity from `1` to `0`;
+ * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
+ * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
+ * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
+ * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
+ * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
+ * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
+ * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
+ * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
+ * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
+ * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
+ * `transform-animation` Animates a custom transform.
+Note 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.
+Shared element animations
+ * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
+ * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
+Group animations
+ * `cascaded-animation` Applys an animation to an array of elements with a delay between each.
+<a name="demos"></a>
+## Demos
+ * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
+ * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
+ * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
+ * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
+ * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)