neon-animated-pages does not animate just appears in window

Just watched the latest polycast video on neon-animation-pages, and tried a basic setup, but my animation doesn't work. It appears in the window but thats it. This is the index page:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src='../../../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
    <link rel="import" href="../../../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../../../bower_components/paper-material/paper-material.html">
    <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
    <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="../../../bower_components/neon-animation/neon-animations.html">
    <link rel="import" href="x-module">
</head>
<body class="fullbleed">

    <neon-animated-pages class="flex" selected="1">
        <x-module></x-module>
    </neon-animated-pages>

</body>
</html>

and here is the element:

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../../../bower_components/paper-material/paper-material.html">


    <dom-module id="x-module">
        <style>

        </style>

        <template>
           <paper-material>
               <h1>HELO</h1>
           </paper-material>
        </template>

        <script>
        Polymer({
            is:'x-module',
            behaviors: [Polymer.NeonAnimatableBehavior,
            Polymer.NeonAnimationRunnerBehavior],
            properties:{
                animationConfig:{
                    value: function() {
                        return {
                            'entry': {
                            name: 'slide-from-right-animation',
                            node: this,
                            timing:{
                                duration: 10
                            },
                        },
                        'exit': {
                            name: 'slide-right-animation',
                            node: this,
                            timing:{
                                duration: 10
                            },
                        }
                    };
                 }
              }
           },
        });
        </script>
    </dom-module>

I added the timing property to see if maybe it was just happening really fast. I'm sure I am just doing something dumb, but I have read the readme and and the demos. I cant see what is wrong

Solution

I think the issue is that, you need to provide at least two elements inside neon-animated-pages so it knows what to transit from/to.

To test it, just add another x-element inside -

<neon-animated-pages class="flex" selected="1">
    <x-module></x-module>
    <x-module></x-module>
</neon-animated-pages>