How to use neon-animated-pages

[Vincent Uribe]

Hi everybody!

Does anyone have a working example of a neon-animated-pages? I guess this element will replace the core-animated-pages I (heavily) used in the project I'm migrating.

I use it like that : 

<neon-animated-pages id="content"  valueattr="hash">

<div hash="page1">Page 1</div>

<div hash="page2">Page 2</div>

<div hash="page3">Page 3</div>

</neon-animated-pages>

Some js...

this.$.content.selected =  'page' + value.uid;

If I put a on-selected-changed I can see the changed occurs but the transition does not occur.

Thanks!

[Yvonne Yip]

Hi,

The API for neon-animated-pages is quite different than core-animated-pages. Check out the documentation in the README and the elements. The demos in demo/ should be working as well.

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/8c98ab2f-018b-42e5-b77a-026cc55d0396%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Vincent Uribe]

Thanks,

I checked the doc and tried to implement it. I understand that the neon-animated-pages children have to implement NeonAnimatableBehavior but I don't get how to reproduce the core-animated-pages behavior...

[francisco...@gmail.com]

Did you get it?

[Vincent Uribe]

I did, although I can't get animations to work even with behaviors...

You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/bgZH99IiYB0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f2c9692d-e6ea-4d05-83c4-a70be7fcaa51%40googlegroups.com.

[Kian Lavi]

I would love an ELI5 on neon-animated-pages. I'm having a lot of trouble figuring out how to implement it simply based on the documentation and demos.

[Arthur Evans]

Sorry, what's an ELI5?

Would love to provide better documentation here, but I'm not sure what you mean.

Thanks,

Arthur

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9912658c-04db-47f9-9326-a745cbb9ce11%40googlegroups.com.

[Kian Lavi]

Sorry, ELI5 is a reddit neologism, meaning "Explain Like I'm 5" -- basically a simple walkthrough. Appreciate your help Arthur! 

[Hans Dulimarta]

I cut the following snippet from one of my current projects. The following text is saved inside your-module.html

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

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

<dom-module id="your-module">

  <template>

    <neon-animated-pages entry-animation="fade-in-animation" exit-animation="fade-out-animation">

      <neon-animatable>

        The first animated page goes here

      </neon-animatable>

      <neon-animatable>

        The second animated page goes here

      </neon-animatable>

    </neon-animated-pages>

  </template>

</dom-module>

[andreas...@hotmail.de]

What really confuses me about neon animations is that it seems like you need to define your animations within the custom elements? Is that right? So for example I have a grid of cards that I want to animate in from the bottom one by one, something like this:

http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html

Does this mean the animation has to be defined within that custom grid element? So meaning a) you need to have a custom element to use your animations on and b) you need to define those animations directly within the element?

That would seem quite non-destructive, meaning that whenever I'd want to change the animations we'd have to change the element itself, whereas it would be smarter to have the animations stored in an external script like animation.js, so it's easily transferable to other elements.

Am I just misunderstanding this? From the demos it seems the animations are always embedded directly in the custom element.

[rher...@starsacramento.org]

I would like to second this right here.  I can't even tell from the documentation what components work with neon-animations already, or if they even do.

[Hans Dulimarta]

I'm using the entry-animation and exit-animation attributes on the neon-animated-pages element, and it works for me.

On Tuesday, May 19, 2015 at 11:21:02 AM UTC-4, Vincent Uribe wrote:

[ichil...@exgeo.com]

+1 This needs much better documentation. https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages explains nothing on how to use it. Going to github, the neon-animated-pages section does not tell you everything you need to do to get it working (except perhaps an explicit animation). 

On Tuesday, May 19, 2015 at 11:21:02 AM UTC-4, Vincent Uribe wrote: