Roll Polymer

third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/fade-background-extracted.js

 /**
    * Upon scrolling past a threshold, fade in the rear background layer and fade out the front
    * background layer (opacity CSS transitioned over time).
+   *
+   *
    */
   Polymer.AppLayout.registerEffect('fade-background', {
     /** @this Polymer.AppLayout.ElementWithBackground */
     setUp: function setUp(config) {
+      var fx = {};
       var duration = config.duration || '0.5s';
-      this.$.backgroundFrontLayer.style.willChange = 'opacity';
-      this.$.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)';
-      this.$.backgroundFrontLayer.style.transitionProperty = 'opacity';
-      this.$.backgroundFrontLayer.style.transitionDuration = duration;
-      this.$.backgroundRearLayer.style.willChange = 'opacity';
-      this.$.backgroundRearLayer.style.webkitTransform = 'translateZ(0)';
-      this.$.backgroundRearLayer.style.transitionProperty = 'opacity';
-      this.$.backgroundRearLayer.style.transitionDuration = duration;
+      fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer');
+      fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer');
+      fx.backgroundFrontLayer.style.willChange = 'opacity';
+      fx.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)';
+      fx.backgroundFrontLayer.style.transitionProperty = 'opacity';
+      fx.backgroundFrontLayer.style.transitionDuration = duration;
+      fx.backgroundRearLayer.style.willChange = 'opacity';
+      fx.backgroundRearLayer.style.webkitTransform = 'translateZ(0)';
+      fx.backgroundRearLayer.style.transitionProperty = 'opacity';
+      fx.backgroundRearLayer.style.transitionDuration = duration;
+      this._fxFadeBackground = fx;
     },
     /** @this Polymer.AppLayout.ElementWithBackground */
     run: function run(p, y) {
+      var fx = this._fxFadeBackground;
       if (p >= 1) {
-        this.$.backgroundFrontLayer.style.opacity = 0;
-        this.$.backgroundRearLayer.style.opacity = 1;
+        fx.backgroundFrontLayer.style.opacity = 0;
+        fx.backgroundRearLayer.style.opacity = 1;
       } else {
-        this.$.backgroundFrontLayer.style.opacity = 1;
-        this.$.backgroundRearLayer.style.opacity = 0;
+        fx.backgroundFrontLayer.style.opacity = 1;
+        fx.backgroundRearLayer.style.opacity = 0;
       }
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    tearDown: function tearDown() {
+      delete this._fxFadeBackground;
     }
   });