Scrolling Background

How it works

Scrolling Background is a nestable widget. You can put any content inside by using the Content repeater control: custom code, templates, global widgets and shortcodes.
This widget was designed to act as your content container. The element has a 100% width and a 400svh height by default. But you can change it to what you need, like a height auto to adapt to the children’s height.

Scrolling Background controls

Scrolling Background Height will be divided by the number of colors, resulting in X pixels. A color switch will happen every those X pixels.
Colors: this is a repeater control to set all the colors your Scrolling Background will switch to. The first color in this repeater is the default background color of the element when the page loads.
Transition: there are 2 types: Fade or Progressive. Fade will animate from one color to another when a new color switch is detected. Progressive will switch from one color to another progressively on scroll (the color switch is attached to the scroll).
Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.