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