Polymer neon animation with paper material - animation

Question

I'm using neon animated pages in my Polymer project. The animation and routing through the pages works fine. The only problem is that inside my components the styling isn't working anymore for my paper-material. The padding and margin are lost and my text isn't put inside it.
See my code:
Index.html
<neon-animated-pages attr-for-selected="data-route" selected="{{route}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<home-page data-route="home"></home-page>
<games-page data-route="games"></games-page>
<ranking-page data-route="ranking"></ranking-page>
<contact-page data-route="contact"></contact-page>
</neon-animated-pages>
ranking page as an example:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="ranking-page">
<link rel="import" type="css" href="../../styles/elements/paper-material.css">
<template>
<style include="shared-styles"></style>
<span class="page-title">Klassement</span>
<paper-material elevation="1">
Ranking
</paper-material>
</template>
<script src="../../scripts/controllers/ranking.js"></script>
</dom-module>
ranking page script:
(function() {
'use strict';
Polymer({
is: 'ranking-page',
behaviors: [
Polymer.NeonAnimatableBehavior,
Polymer.NeonPageBehavior
],
listeners: {
'entry-animation-start': 'onEntryStart',
'entry-animation-finish': 'onEntryFinish',
'exit-animation-start': 'onExitStart',
'exit-animation-finish': 'onExitFinish'
},
onEntryStart: function(e) {
console.log(this.title + ' entry animation starts');
},
onEntryFinish: function(e) {
console.log(this.title + ' entry animation finished');
},
onExitStart: function(e) {
console.log(this.title + ' exit animation starts');
},
onExitFinish: function(e) {
console.log(this.title + ' exit animation finished');
}
});
})();
Can someone help me with this one please?

Answer 1

I already solved the problem. If forgot to add < neon-animatable> to my page :)