Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Getting started
Jose Tamu
June 3, 2025 /  Beginner /  Light

Scrolling Background

Scrolling Background· Demo

How it works

Scrolling Background is a nestable element so can drag and drop all the elements you need inside it. This element 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. You can also add any style you need from the Style Tab and it will be applied to the Scrolling Background element.

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.

On this page