text: /**
   * @private
   */
  Ext.define('Ext.layout.card.fx.ScrollCover', {
      extend: 'Ext.layout.card.fx.Scroll',
  
      alias: 'layout.card.fx.scrollcover',
  
      onActiveItemChange: function(cardLayout, inItem, outItem, controller) {
          var containerElement, containerSize, xy, animConfig,
              inTranslate, outTranslate;
  
          this.currentEventController = controller;
          this.inItem = inItem;
  
          if (inItem && outItem) {
              containerElement = this.getLayout().container.bodyElement;
  
              containerSize = containerElement.getSize();
              xy = this.calculateXY(containerSize);
              animConfig = {
                  easing: this.getEasing(),
                  duration: this.getDuration()
              };
  
              inItem.renderElement.dom.style.setProperty('visibility', 'hidden', 'important');
              inTranslate = inItem.setTranslatable(true).getTranslatable();
              outTranslate = outItem.setTranslatable(true).getTranslatable();
  
              outTranslate.translate({ x: 0, y: 0});
              inTranslate.translate({ x: xy.left, y: xy.top});
              inTranslate.getWrapper().dom.style.setProperty('z-index', '100', 'important');
              inItem.show();
  
              inTranslate.on({
                  animationstart: 'onInAnimationStart',
                  animationend: 'onInAnimationEnd',
                  scope: this
              });
              inTranslate.translateAnimated({ x: 0, y: 0}, animConfig);
  
              controller.pause();
          }
      },
  
      onInAnimationStart: function() {
          this.inItem.renderElement.dom.style.removeProperty('visibility');
      },
  
      onInAnimationEnd: function() {
          if (!this.destroyed) {
              this.inItem.getTranslatable().getWrapper().dom.style.removeProperty('z-index'); // Remove this when we can remove translatable
              this.currentEventController.resume();
          }
      }
  });
  