Polymer: neon-animation inside neon-animation

Question

I am using something like this:

<neon-animated-pages class="flex" selected="{{route}}" attr-for-selected="data-route" on-iron-select="_pageChanged" on-neon-animation-finish="_onNeonAnimationFinish">
                    <sys-neonpage1 data-route="home" id="page1" class="fit"></sys-neonpage1>
                    <sys-neonpage2 data-route="users" id="page2" class="fit"></sys-neonpage2>
                    <sys-elemento data-route="contact" id="page3" class="fit"></sys-elemento>                       
                </neon-animated-pages>

That works fine, with the animations inside >sys-neonpage1...> But inside that element I have other elements which have some animations, what i want to do is that the animation of the element inside also run, but in this case it doesnt work, only the animations of works.

for exmaple inside I have something like this:

dom-module id="sys-neonpage1">
<template>        
        <sys-elemento class="prueba"></sys-elemento>
</template>

And the element has his own animations that never started if i use it inside ...

is that posible?, thanks a lot.

Vincent Guillou Vincent Guillou · Accepted Answer · 2016-02-18T08:15:49

What you want to do is actually built-in the neon-animated-pages component: Running animations encapsulated in children nodes

In general, i recommend you read the whole "using neon-animations" guide as it is well written.

Polymer: neon-animation inside neon-animation

1 Answers