Add Scroll Based Visual Effects
Have fade, grayscale and blur effects smoothly animate as your module scrolls into view.
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/scrollbasedeffectsthumb.jpg)
What Are Scroll Based Effects
Scroll based effects give you the ability to apply smoothly animated visual effects to your modules as they enter or leave the screen.
Have them fade in, transition from blurred to clear, and go from black & white to full color:
Enabling Scroll Based Effects
Let’s step through how to enable scroll based effects first at the module level, then at the slide and/or layer levels.
Enable at Module Level
Go to the Module General Options tab, and into the On Scroll sub-section:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/onscroll.jpg)
Then in the Scroll Based Features panel, click the Effects tab:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/effectstab.jpg)
Toggle the Scroll Based Effects option to ON:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/scrollbasedon.jpg)
Choose Effects
There are three effects available, all listed under the Scroll Effects Default panel. They are Fade, Grayscale and Blur:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/scrolleffects.jpg)
For each effect you want to use, toggle its option to ON.
Fade
If the Fade effect is applied, the slide/layers will at first be faded out, then will fade in as scrolling brings the module into view:
Grayscale
If the Grayscale effect is applied, the slide/layers will at first be in black & white, then will shift into full color as scrolling brings the module into view:
Blur
If the Blur effect is applied, the slide/layers will at first be blurred, then will become clear as scrolling brings the module into view:
When you activate Blur an additional option Max Blur Strength will appear:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/maxblurstrength.jpg)
This option lets you control the strength of the blur effect, with higher numbers making the effect more pronounced.
Enable at Slide & Layer Level
By default, when you enable scroll based effects they won’t be visible until you activate them at the slide and/or layer level as well.
Note that applying scroll based effects at the slide level affects the slide background only, as opposed the entire slide with all its contents. Additionally, you are free to apply effects to slides but not layers, or vice versa.
There are two ways you can activate scroll based effects on your slides or layers. You can either activate them for each slide/layer manually, or you can activate them for all slides/layers at once.
Enable for All Slides
If you want to activate scroll based effects for all slides at once, then in the module level On Scroll sub-section, Scroll Effects Default panel, toggle Slides default Enabled to ON:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/layerdefaultenabled.jpg)
Enable for Individual Slides
To enable scroll based effects for a single slide, go into its Slide Options tab, On Scroll sub-section:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/slideonscroll.jpg)
In the Scroll Effects panel choose the effect you want to enable, and set its option to Enabled – Scroll Based:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/scrolleffectsslide.jpg)
Note: If you already set scroll based effects to be the default for all slides, but you want to turn off an effect for this slide, you can set its option to Disabled – Time Based.
Enable for All Layers
If you want to activate scroll based effects for all layers at once, then in the module level On Scroll sub-section, Scroll Effects Default panel, toggle Layers default Enabled to ON:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/layersdefaultenabled.jpg)
Enable for Individual Layers
To enable scroll based effects for a single layer, select it then go to the Layer Options tab, On Scroll sub-section:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/layeronscrolo.jpg)
In the Filter Effect Scroll Based panel set the Handling option to Enabled – Scroll Based:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/layerscrollfilter.jpg)
Note: If you already set scroll based effects to be the default for all layers, but you want to override that for specific layers, you can set Handling to Disabled.
Scroll Effects Settings
Options for additional scroll based effects configuration can be found under the Module General Options tab, On Scroll sub-section, Scroll Effects Settings panel:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/scrolleffectssettingspanel.jpg)
Direction
The Direction option determines which direction of scrolling will trigger scroll based effects. It can be set to Top, Bottom or Both:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/direction.jpg)
Choosing Top will trigger effects only when scrolling from the top, i.e. scrolling down.
Choosing Bottom will trigger effects only when scrolling from the bottom, i.e. scrolling up.
Choosing Both will trigger effects when scrolling in either direction.
Disable Mobile
Toggle the Disable Mobile option to ON and no scroll based effects will be applied on mobile devices.
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/disablemobile.jpg)
Offset(Tilt) Eff
Use the Offset(Tilt) Eff option to set the portion of module’s height, as a percentage(%
), that should be visible before scroll based effects start to animate:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/offsettilteffect.jpg)
Factor on BGs/Layer
The Factor on BGs and Factor on Layer options control the strength of the scroll based effects on the slide backgrounds and layers, respectively:
![](https://www.sliderrevolution.com/wp-content/uploads/2022/10/factor.jpg)
The higher the number, the more pronounced the effect will be, and vice versa.
For example, a value of 0.5
would mean the grayscale effect will still retain some color, fade wouldn’t become completely transparent, and blur would stay a little sharper.
However a value of 2
would mean grayscale, blur and fade effects would all reach their strongest possible presentation, and sooner during scrolling.