What It Does
The Container block’s On Scroll Animation option changes a section’s background color as visitors scroll past it. Instead of one static background, the container cycles through a list of colors you define, blending or switching between them as the page scrolls.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of Nexter Blocks. Make sure it’s installed and activated to use this feature.
Why It Matters
A page where every section looks identical can feel flat, especially on long scrolling layouts. Tying the background color to scroll position gives each section its own visual identity without adding custom CSS or JavaScript, and it draws the eye to the exact moment a new section begins.
What You Get
- An On Scroll Animation option under Style > Background Deep Layer
- An Item List repeater to define as many color stops as you need (3 by default)
- A choice between Gradient Like Effect (colors blend gradually) and Direct Color Change Effect (colors switch instantly)
- A Transition Duration (s) control for the gradient blend speed
Benefits
- Landing pages for SaaS or product launches that use scroll-triggered color transitions to highlight different feature sections
- Portfolio or agency websites where color changes on scroll reinforce visual hierarchy and guide the reader down the page
- WooCommerce product pages that use a sticky container with a changing background to emphasize CTAs during scroll
Capabilities
Add or remove Item List entries freely, each with its own solid color or gradient background. Pick Gradient Like Effect when you want a smooth, continuous blend across all colors as the visitor scrolls, or Direct Color Change Effect for a crisp switch at each scroll point. Transition Duration only applies to the Gradient Like Effect.
How It Works
Each Item List entry acts as one color stop mapped to a position in the container’s scroll range. As the visitor scrolls through the container, Nexter Blocks reads the scroll position and either interpolates between stops (Gradient Like Effect) or jumps to the next stop once it’s reached (Direct Color Change Effect). At least two items with different colors are needed for a visible change.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps below.
1. Go to Style > Background Deep Layer, then select On Scroll Animation from the Select Background Option dropdown.
2. In the Item List section, you’ll find three items by default. Open an item and, in its Background section, add either a solid color or a gradient.
3. Set a different background color on at least one more item to see the color-change effect on scroll. Use the + Add Item button to add more color stops.
4. From the On Scroll Change dropdown, choose how the colors change:
- Gradient Like Effect – the colors added to the repeater items change gradually with a transition, creating a gradient color effect as you scroll.
- Direct Color Change Effect – the colors added to the repeater items change instantly as you scroll.
Note: For the Gradient Like Effect, you can set the animation duration for changing background colors from the Transition Duration (s) section.
The background color now changes as visitors scroll through the container.
Use Cases
- Landing pages for SaaS or product launches that use scroll-triggered color transitions to highlight different feature sections
- Portfolio or agency websites where color changes on scroll reinforce visual hierarchy and guide the reader down the page
- WooCommerce product pages that use a sticky container with a changing background to emphasize CTAs during scroll
Limitations
- You need at least two Item List entries with different colors for a visible change – a single item shows no transition.
- This option changes solid colors and gradients only. For rotating images instead, use the Creative Gallery option under the same Background Deep Layer panel.
- Transition Duration only affects the Gradient Like Effect; Direct Color Change Effect switches instantly regardless of this setting.
Troubleshooting
- No color change is visible – check that at least two Item List entries have different background colors set; a list with one item (or identical colors) shows no transition.
- Colors jump instead of blending – the On Scroll Change dropdown is set to Direct Color Change Effect; switch it to Gradient Like Effect for a smooth blend.
- Transition Duration doesn’t seem to do anything – this control only applies to the Gradient Like Effect, as noted on the panel; it has no effect when Direct Color Change Effect is selected.
