Scroll effects

Polymer.AppScrollEffectsBehavior provides an interface that allows an element to use scrolls effects.

Importing the app-layout effects

app-layout provides a set of scroll effects that can be used by explicitly importing app-scroll-effects.html:

<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">

The scroll effects can also be used by individually importing app-layout/app-scroll-effects/effects/[effectName].html. For example:

<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">

Consuming effects

Effects can be consumed via the effects property. For example:

<app-header effects="waterfall"></app-header>

Creating scroll effects

You may want to create a custom scroll effect if you need to modify the CSS of an element based on the scroll position.

A scroll effect definition is an object with setUp(), tearDown() and run() functions.

To register the effect, you can use Polymer.AppLayout.registerEffect(effectName, effectDef) For example, let's define an effect that resizes the header's logo:

Polymer.AppLayout.registerEffect('resizable-logo', {
  setUp: function(config) {
    // the effect's config is passed to the setUp.
    this._fxResizeLogo = { logo: Polymer.dom(this).querySelector('[logo]') };
  },

  run: function(progress) {
     // the progress of the effect
     this.transform('scale3d(' + progress + ', '+ progress +', 1)',  this._fxResizeLogo.logo);
  },

  tearDown: function() {
     // clean up and reset of states
     delete this._fxResizeLogo;
  }
});

Now, you can consume the effect:

<app-header id="appHeader" effects="resizable-logo">
  <img logo src="logo.svg">
</app-header>

Imperative API

var logoEffect = appHeader.createEffect('resizable-logo', effectConfig);
// run the effect: logoEffect.run(progress);
// tear down the effect: logoEffect.tearDown();

Configuring effects

For effects installed via the effects property, their configuration can be set via the effectsConfig property. For example:

<app-header effects="waterfall"
  effects-config='{"waterfall": {"startsAt": 0, "endsAt": 0.5}}'>
</app-header>

All effects have a startsAt and endsAt config property. They specify at what point the effect should start and end. This value goes from 0 to 1 inclusive.