animationConfig does not work on neon-animation-pages

[HW-Siew]

Hi, I am trying to change the duration of animation for neon-animation-pages as follow.

<neon-animated-pages id="pages" selected="[[selected]]" animation-config="[[animationConfig]]">
...
</neon-animated-pages>

Polymer({
  is : 'custom-view',
  properties:{
    animationConfig:{
      value : function(){
           return {
              entry:{
              name:'slide-from-right-animation',
          node:this.$.pages,
          timing: {duration: 5000}
           },
          exit: {
         name: 'slide-left-animation',
              node: this.$.pages,
         timing: {duration: 5000}
          }
           }
      }
    }
  },
  ....
})

However, it doesnt work. Not only the duration is not applied and also the animation 'slid-from-right-animation' and 'slide-left-animation'.

Any idea what am i missing?

Thanks for advise.

[vguillou]

Quick question here :
Did you import the slide-from-right-animation and slide-left-animation ?

[HW-Siew]

Hi @vguillou, yes i did. It was working when i use 'entry-animation' and 'exit-animation' instead of 'animation-config'.

[araker]

I'm having the same problem, from what I see in the source the animationConfig object gets cleared out when switching to another page. See https://github.com/PolymerElements/neon-animation/blob/master/neon-animated-pages.html on line 107.

[dannywolfmx]

Same problem here

[mgiuffrida]

@araker is exactly right. neon-animated-pages has an animationConfig property (from NeonAnimatableBehavior), but overwrites it with an empty array in _onIronSelect().

I think this is WAI, in the sense that entry and exit on neon-animated-pages are convenience properties; if you want to use specific animation config objects, you have to set those on each child/subpage. But that's a pain, and given that animationConfig is documented, it seems reasonable to check if it's been set (or if entryAnimation and exitAnimation are both empty) instead of always overwriting it.

[dman777]

@mgiuffrida like this? I tried it but the effect doesn't seem to take effect

In Polymer 1....

    <neon-animated-pages
      animation-config="[[animationConfig]]"
      selected="{{parent}}"
      id="foo">
 
      <module-settings slot="other" id="bob" name="module-settings" provider="[[provider]]"></module-settings>

--------------------------------
          animationConfig: {
            value: function() {
              return {
                'entry': [
                  {name: 'slide-from-right-animation' },
                  {animatable: this.$.bob, type: 'entry'}
                ]
              }
            }
          },