title: Polymer: Animating iron-selector with neon-animation
body: <p>To illustrate the problem I'm experiencing, I put together a little <code>accordion-menu</code> element based on <a href="https://github.com/PolymerElements/seed-element/tree/v1.0.7" rel="nofollow">version 1.0.7 of Polymer's <code>&lt;seed-element&gt;</code> boilerplate</a>. To create your own copy of this element, follow these six steps:</p>
  
  <ol>
  <li><p>Download the <code>&lt;seed-element&gt;</code> boilerplate linked to above</p></li>
  <li><p>Open bower.json, replace all instances of "seed-element" with "accordion-menu", and replace the dependencies with this:</p>
  
  <pre><code>"neon-animation": "PolymerElements/neon-animation#1.2.3",
  "polymer": "Polymer/polymer#1.4.0"
  </code></pre></li>
  <li><p>Rename "seed-element.html" to "accordion-menu.html" and replace its contents with this:</p>
  
  <pre><code>&lt;!--
  @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
  --&gt;
  
  &lt;link rel="import" href="../polymer/polymer.html"&gt;
  &lt;link rel="import" href="../iron-selector/iron-selector.html"&gt;
  &lt;link rel="import" href="../neon-animation/animations/slide-down-animation.html"&gt;
  &lt;link rel="import" href="../neon-animation/animations/slide-up-animation.html"&gt;
  &lt;link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"&gt;
  
  &lt;!--
  @demo demo/index.html
  --&gt;
  
  &lt;dom-module id="accordion-menu"&gt;
    &lt;template&gt;
      &lt;style&gt;
        :host {
          display: block;
          box-sizing: border-box;
        }
  
        /deep/ .accordion-title {
          display: block;
          padding: 8px;
          color: #fff;
        }
  
        /deep/ .accordion-title:before {
          margin-right: 5px;
        }
  
        /deep/ div:not(.iron-selected) .accordion-title {
          background-color: #444;
          cursor: pointer;
        }
  
        /deep/ div:not(.iron-selected) .accordion-title:hover {
          background-color: #777;
        }
  
        /deep/ div:not(.iron-selected) .accordion-title:before {
          content: "\25BA";
        }
  
        /deep/ .iron-selected .accordion-title {
          background-color: #070;
        }
  
        /deep/ .iron-selected .accordion-title:before {
          content: "\25BC";
        }
  
        /deep/ .accordion-content {
          display: none;
        }
  
        /deep/ .iron-selected .accordion-content {
          display: block;
        }
      &lt;/style&gt;
  
      &lt;iron-selector selected="0"&gt;&lt;content&gt;&lt;/content&gt;&lt;/iron-selector&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: 'accordion-menu',
  
        properties: {
          animationConfig: {
            value: function() {
              return {
                'entry': {
                  name: 'slide-down-animation',
                  node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),
                },
              }
            }
          },
        },
  
        'listeners': {
          'iron-deselect': 'onDeselect',
          'iron-select': 'onSelect',
        },
  
        'behaviors': [
          Polymer.NeonAnimationRunnerBehavior,
        ],
  
        onDeselect: function(e) {
          var deselectedItem = e.detail.item;
          // this.playAnimation('exit');
        },
  
        onSelect: function(e) {
          var selectedItem = e.detail.item;
          this.playAnimation('entry');
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre></li>
  <li><p>Replace the contents of "demo/index.html" with this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--
  @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
  --&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"&gt;
      &lt;title&gt;accordion-menu Demo&lt;/title&gt;
      &lt;script src="../../webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="../../paper-styles/demo-pages.html"&gt;
      &lt;link rel="import" href="../accordion-menu.html"&gt;
    &lt;/head&gt;
    &lt;body unresolved&gt;
  
      &lt;p&gt;An example of &lt;code&gt;&amp;lt;accordion-menu&amp;gt;&lt;/code&gt;:&lt;/p&gt;
  
      &lt;accordion-menu&gt;
        &lt;div&gt;
          &lt;span class="accordion-title"&gt;Section 1&lt;/span&gt;
          &lt;div class="accordion-content"&gt;
            &lt;p&gt;Section 1's content&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;span class="accordion-title"&gt;Section 2&lt;/span&gt;
          &lt;div class="accordion-content"&gt;
            &lt;p&gt;Section 2's content&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;span class="accordion-title"&gt;Section 3&lt;/span&gt;
          &lt;div class="accordion-content"&gt;
            &lt;p&gt;Section 3's content&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;span class="accordion-title"&gt;Section 4&lt;/span&gt;
          &lt;div class="accordion-content"&gt;
            &lt;p&gt;Section 4's content&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/accordion-menu&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  <li><p>Run <code>bower install</code></p></li>
  <li><p>Use <code>polyserve</code> to see the demo</p></li>
  </ol>
  
  <p>When you click on any of the section titles, the section shows like it should, but it does not animate. The console has this error message:</p>
  
  <p><code>Couldnt play ( entry [Object] ). TypeError: Cannot read property 'style' of null</code></p>
  
  <p>I know the problem is what I have at line 82 of "accordion-menu.html":</p>
  
  <p><code>node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),</code></p>
  
  <p>What should I put instead of what I have above?</p>