Q:

Polymer neon-animations example not animating

So I have take the example neon-animation code found here http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html
And copied it into my c9.io IDE environment to see if I can get it to work without changes other than it working in my environment. I can't. 
The code I am running does not animate the way the above example does. Pages change, but they do not slide left and right. They just change.
The copy of the code is below, noting that they only real change I made to the example code are import statements to point at my own repository, plus a few console logs.
I am presuming I have a version issue with my Polymer installed code. But I note that the polymer files do not record their version number. I used bower to install #^1.0.0; although I did get "Unable to find a suitable version" errors and had to resolve those. 
Looking at my version of Polymer code and comparing it to that used by the original example code I can tell that some are different, but with the deep number of imports going on its not practical to follow all the important statements and find all the differences.
Is there are way to determine versions? Is there are way to verify what I am running? Any suggestions welcome?

        <head>
          <title>neon-animated-pages demo: declarative</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="bower_components//webcomponentsjs/webcomponents-lite.js">
          </script>
          <link rel="import" href="bower_components/paper-styles/paper-styles.html">
          <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
          <link rel="import" href="bower_components/neon-animation/neon-animatable.html">
          <link rel="import" href="bower_components/neon-animation/neon-animations.html">

          <style>
            .toolbar {
              padding: 8px;
            }
          </style>

          <style is="custom-style">
            neon-animatable {
              color: white;
              @apply(--layout-horizontal);
              @apply(--layout-center-center);
              @apply(--paper-font-display4);
            }

            neon-animatable:nth-child(1) {
              background: var(--paper-red-500);
            }

            neon-animatable:nth-child(2) {
              background: var(--paper-blue-500);
            }

            neon-animatable:nth-child(3) {
              background: var(--paper-orange-500);
            }

            neon-animatable:nth-child(4) {
              background: var(--paper-green-500);
            }

            neon-animatable:nth-child(5) {
              background: var(--paper-purple-500);
            }
          </style>

        </head>

        <body class="fullbleed layout vertical">

          <template is="dom-bind">

            <div class="toolbar">
              <button on-click="_onPrevClick">&lt;&lt;</button>
              <button on-click="_onNextClick">&gt;&gt;</button>
            </div>

            <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
              <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>

          </template>

          <script>
            this.entryAnimation = 'slide-from-left-animation';
            this.exitAnimation = 'slide-right-animation';
            var scope = document.querySelector('template[is="dom-bind"]');
            scope.selected = 0;

            scope._onPrevClick = function() {
              console.log()
              this.entryAnimation = 'slide-from-left-animation';
              this.exitAnimation = 'slide-right-animation';
              console.log(pages.entryAnimation);
              this.selected = this.selected === 0 ? 4 : (this.selected - 1);
            }

            scope._onNextClick = function() {
              this.entryAnimation = 'slide-from-right-animation';
              this.exitAnimation = 'slide-left-animation';
              console.log(pages.exitAnimation);
              this.selected = this.selected === 4 ? 0 : (this.selected + 1);
            }
          </script>

        </body>

        </html>

A:

The code is correct. Here is a dump of your code into JSBin and it works.
neon-animation implements web-animations-js - perhaps you installed v2.1.1 which breaks neon-animation. You can check versions by looking at the .bower.json file in your bower_components/<element-name> directory.
Update your components and you should be fine. I haven't had problems when I set my bower dependencies to something like: 
  "dependencies": {
    "polymer": "Polymer/polymer#^1.0.0",
    "layout": "Polymer/layout",
    "iron-elements": "PolymerElements/iron-elements#^1.0.0",
    "paper-elements": "PolymerElements/paper-elements#^1.0.0",
    "gold-elements": "PolymerElements/gold-elements#^1.0.0",
    "platinum-elements": "PolymerElements/platinum-elements#^1.0.0",
    "neon-elements": "PolymerElements/neon-animation#^1.0.0"
  },

