# 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`:
```html
```
The scroll effects can also be used by individually importing `app-layout/app-scroll-effects/effects/[effectName].html`.
For example:
```html
```
### Consuming effects
Effects can be consumed via the `effects` property. For example:
```html
```
### 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:
```js
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:
```html
```
### Imperative API
```js
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:
```html
```
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.