Entry animation runs before google-youtube element is loaded

[Darin Hensley]

stackoverflow cross post

*Polymer 1.0*

I have a custom element where the entry animation starts before the element is completely loaded. This causes the `<paper-button>` to have the animation before `<google-youtube>` is loaded, which looks funny. 

I think the `'iron-overlay-opened'` is fired before all the elements are loaded...in this case the `<paper-button>` is loaded but the `<google-youtube>` is not. 

How can I make it to where the custom element loads completely first so the `entry` animation is applied correctly? 

*This is using `paper-dialog-behavior` element*

 

  <dom-module id="video-player">
      <style>
         :host {
          @apply(--layout-fit);
         }
      </style>
     
   
      <template>
        <template is="dom-if" if="{{foo.bar}}">
          <div class="layout vertical fit">
            <google-youtube style="height: 100%"
              video-id="YMWd7QnXY8E"
              rel="1"
              start="1"
              playsinline="0"
              controls="2"
              showinfo="0"
              width="100%"
              height="100%"
              autoplay="1">
            </google-youtube>
          </div>
          <paper-button dialog-dismiss style="color: white; margin-top: 0px">
            <paper-icon-button icon="arrow-back"></paper-icon-button>
          </paper-button>
        </template>
      </template>
   
      <script>
        Polymer({
          is: "video-player",
          behaviors: [
            Polymer.PaperDialogBehavior,
            Polymer.NeonAnimationRunnerBehavior
                     ],
          properties: {
            foo: Object,
            entryAnimation: {
              value: 'scale-up-animation'
            },
            exitAnimation: {
              value: 'fade-out-animation'
            }
          },
          listeners: { 'iron-overlay-opened': 'enableElement',
                       'iron-overlay-closed': 'stopPlayer'
          },
          startPlayer: function() {
            youtubePlayer = this.$$('google-youtube');
            if (youtubePlayer.playbackstarted) {
             youtubePlayer.play();
            }
          },
          enableElement: function(e) {
            this.foo = { bar: true};
            this.playAnimation('entry');
            setTimeout(this.startPlayer.bind(this), 300);
          },
          stopPlayer: function(e) {
            this.playAnimation('exit');
            youtubePlayer = this.$$('google-youtube');
            youtubePlayer.pause();
            youtubePlayer.seekTo(1);
          },
          ready: function() {
            console.log("sssssssssssssssssSS");
           }
        });
      </script>
    </dom-module>

[Darin Hensley]

UPDATE: This issue is not noticeable if bandwith is good and <google-youtube> loads quickly. But if connection is slow, such at a coffee shop, then the issue is noticeable.

[Darin Hensley]

Correction, this issue is even on good bandwidth. I think maybe the element/video was cached before. It only happens on the first load, after that issue won't happen on subsequent viewings if element/video is loaded.