<neon-animated-pages> does not work with <paper-tabs>? - polymer

Question

Question
It is not possible to use <paper-tabs> inside a custom element to [[select]] <neon-animated-pages> right now. Correct?
The comment by #FelixEdlemann:
But I still didn't find a solution for using neon-animated-pages in combination with paper-tabs.
on this Youtube video by #RobDodson seems to support my experience that using <paper-tabs> (inside a custom element) breaks <neon-animated-pages> right now.
Please provide working example.
If I'm wrong. And if it is possible to use <paper-tabs> to [[select]] <neon-animated-pages>, could somebody please post a working example?
My proof of this theory is that simply changing only the <iron-pages> element to <neon-animated-pages> causes the following code to go from "working" to "not working."
What happens is, when trying to use <neon-animated-pages>, all the pages appear on <my-view> at the same time. As it would if there were no <neon-animated-pages> element tag at all.
Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<iron-pages class="flex" selected="[[selected]]">
<!--Changing only the above line to <neon-animated-pages breaks it-->
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</iron-pages>
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Not Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<!-- The below tag is what seems to break it / stop it from working -->
<neon-animated-pages
class="flex"
selected="[[selected]]"
entry-animation="slide-from-left-animation"
exit-animation="fade-out-animation"
>
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</neon-animated-pages
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Working JsBins per #zerodevx:
At top level index.html | http://jsbin.com/vudinaziwe/edit?html,output
Inside custom element | http://jsbin.com/bejahumeru/edit?html,output

Answer 1

I don't see why not - unless <neon-animation>'s API has changed, your page elements need to implement Polymer.NeonAnimatableBehavior. The <neon-animatable> element is a convenience element for that. You also need to import the specific animations you are using.
In your example, your imports should should look something like:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.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/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
While your body might look something like:
<template is="dom-bind">
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
Working jsbin: http://jsbin.com/vudinaziwe/edit?html,output
UPDATE 1:
Applying this inside a custom element,
x-test.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.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/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
<dom-module id="x-test">
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
<script>
Polymer({
is: "x-test",
properties: {
selected: { type: Number, value: 0 }
}
});
</script>
</dom-module>
Jsbin: http://jsbin.com/bejahumeru/edit?html,output

Answer 2

My problem was with my imports.
I was using:
<link rel="import" href="bower_components/neon-animated-pages/neon-animated-pages.html">
instead of:
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">