Use Paper-tabs in combination with Neon animated Pages

[Stefan Muke]

Hey,
Is it possible to use paper-tabs to swich between neon-animated pages? I followed this blog post to write the following code that should work according to the tutorial, however, it doesn't.

...  
  <paper-tabs selected="{{data.tabName}}" attr-for-selected="key"  sticky>
      <paper-tab key='foo'>Foo</paper-tab>
      <paper-tab key='bar'>Bar</paper-tab>
      <paper-tab key='baz'>Baz</paper-tab>
    </paper-tabs>
  </app-header>


<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}"></app-route>

    <neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
      <neon-animatable key='foo'> Foo </neon-animatable>
      <neon-animatable key='bar'> Bar </neon-animatable>
      <neon-animatable key='baz'> Baz </neon-animatable>
    </neon-animated-pages>

I tried to use data-binding from paper-tabs in the app-header to neon-animatable-pages, is there still some js required?

Thanks in advance,
Stefan

[Mathieu Comandon]

There shouldn't be any js needed, just make sure you have the required elements imported:

<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">

On a related note, I tried doing the same thing with elements using app-header-layout and the animation is awful (very janky and has visual bugs such as the app-header not taking the full width until the animation is finished), is there any way around that?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/46431d0f-a45c-40d9-84bd-017ab4685258%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.