Polymer Starter Kit with neon-animated-pages

Question

I just see the great polycasts #25: https://www.youtube.com/watch?v=wMhq1o0DULM

That works fine but i want to use something similar with Polymer Starter Kit, but in PSK they use iron-pages with routes (which I think are best practices, aren't they?) but I am so rookie :(, and I can't combine iron-pages with neon-animated-pages :( ¿do you have an example or manual to implement that?

Thanks a lot ....

Answer 1

There is now a recipe to do just that on the Polymer Starter Kit repository.

If you want a working example of that integration, you can find one here (based on Polymer Starter Kit v1.2.3) : https://github.com/vguillou/polymer-starter-kit/tree/neon-animated-pages-basic

Answer 2

Just replace you iron-pages:

 <iron-pages selected="[[page]]" attr-for-selected="name">
   <my-view1 name="view1"></my-view1>
   <my-view2 name="view2"></my-view2>
 </iron-pages>

With neon-animated-pages and chose your entry and exit animations:

<neon-animated-pages selected="[[page]]" attr-for-selected="name" fallback-selection="404" entry-animation="slide-from-bottom-animation" exit-animation="fade-out-animation">
   <my-view1 name="view1"></my-view1>
   <my-view2 name="view2"></my-view2>
</neon-animated-pages>

Install neon-animation with bower install --save PolymerElements/neon-animation

Include the elements:

<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-bottom-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">

And you are good to go.