Polymer 1.x: How to animate custom elements using neon-animation cascaded-animation

Question

This plunk demonstrates the behavior I am trying to achieve.

This plunk demonstrates my problem. Which is that the individual <li items do not perform their cascaded-animation behavior. All I did was to substitute a custom element I called <content-el> in the repeater and change the appropriate node definitions.

Please answer by providing a working plunk that animates the individual <content-el> nodes.

http://plnkr.co/edit/ZzG4lDvl4V32Bod36208?p=preview

<link href="content-el.html" rel="import">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link rel="import" href="app-layout/app-grid/app-grid-style.html">
<link rel="import" href="neon-animation/neon-animation.html">
<link rel="import" href="paper-card/paper-card.html">

<dom-module id="x-app">
    <template>
        <style include="app-grid-style">
            :host {
                display: block;
                --app-grid-columns: 2;
                --app-grid-gutter: 10px;
                --paper-icon-button-ink-color: white;
            }
            .item {
                height: 250px;
                position: relative;
                background-color: white;
                background-size: cover;
                background-position: center center;
            }
        </style>

        <button on-tap="play">Play Animation</button>
        <div class="centered-container">
            <ul class="app-grid">
                <template id="items"
                                    is="dom-repeat"
                                    items="[1,2,3,4,5,6]"
                                    >
                    <li class="item"
                            style="background-image: url(http://fakeimg.pl/800x800/0079D8/fff/?text=[[item]]);"
                            >
                    </li>
                </template>
            </ul>
        </div>
    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'x-app',

                behaviors: [
                    Polymer.NeonAnimationRunnerBehavior,
                ],

                properties: {
                    animationConfig: {
                        type: Object,
                        value: function() {
                            return {
                                'entry': [
                                    {
                                        name: 'slide-from-right-animation',
                                        node: this,
                                    }, {
                                        name: 'cascaded-animation',
                                        animation: 'scale-up-animation',
                                        timing: {
                                            delay: 500,
                                        },
                                    },
                                ],
                            };
                        },
                    },

                },

                attached: function() {
                    this.async(function() {
                        var nodeList = Polymer.dom(this.root).querySelectorAll('li.item');
                        this.animationConfig['entry'][1].nodes = Array.prototype.slice.call(nodeList);
                        //console.log(this.animationConfig['entry'][1].nodes);
                        this.playAnimation('entry');
                    }.bind(this), 500); // https://github.com/Polymer/polymer/issues/2500
                },

                play: function() {
                    this.playAnimation('entry');
                },

            });
        })();
  </script>
</dom-module>

Answer 1

<dom-module id="content-el">
<template>
    <style>
       :host {
            box-sizing: border-box;
            display: block;
       }        
    </style>

http://plnkr.co/edit/2bijfuGjC7NjIAPhMIj4?p=preview