How to Enable Scroll Color Transitions?

Bring your pages to life with smooth, scroll‑activated color transitions. The Scroll Color Transition feature enhances clarity, guides user attention, and creates a modern, immersive browsing experience by dynamically changing background and text colors as each section enters the viewport.

This effect is especially powerful for landing pages, storytelling layouts, product presentations, and any design where visual flow matters. As visitors scroll, each section can softly fade or wipe into a new color theme, helping you highlight content, improve readability, and create a memorable visual journey.

When applied to a section, the Scroll Color Transition automatically updates the background (and optionally the text color) once that section reaches 50% of the viewport. This creates a smooth, elegant transition that keeps users engaged and focused.

• DEMO 1
• DEMO 2
• DEMO 3
• DEMO 4

Scroll Color Transitions (TheGem Elementor)

To enable the Scroll Color Transition in Elementor, follow these steps:

Available Settings

• Enter Viewport Color

  Defines the background color that appears when the container reaches 50% of the viewport

• Enter Text Color

  Sets the text color that should apply once the background changes. Useful when switching between light and dark backgrounds. Overrides default text colors inside the container. Does not override text elements with manually set custom colors

• Is Hero Container

  Ensures a smooth transition from the hero section to the next section. Enable only if the hero container should participate in the color transition

• Transition Effect

  Choose between Fade or Wipe. If Wipe is selected, you can set the wipe direction (left‑to‑right or right‑to‑left)

• Transition Duration

  Sets the transition time in milliseconds

• Transition Timing Function

  Allows you to define a custom timing function for the transition

Scroll Color Transitions (TheGem WPBakery)

To enable the Scroll Color Transition in WPBakery, follow these steps:

Available Settings

• Enter Viewport Color

  Defines the background color that appears when the row reaches 50% of the viewport

• Enter Text Color

  Sets the text color that should apply once the background changes. Ideal for switching between light and dark themes. Overrides default text colors inside the row. Does not override manually set custom text colors

• Is Hero Container

  Ensures a smooth transition from the hero section to the next section. Enable only if the hero row should participate in the color transition

• Transition Effect

  Choose between Fade or Wipe, with optional wipe direction

• Transition Duration

  Sets the transition time in milliseconds

• Transition Timing Function

  Allows you to define a custom timing function

General Recommendations

To achieve the best visual results with the Scroll Color Transition effect, keep the following recommendations in mind:

• Use at least two sections

  The effect requires a minimum of two stacked sections (Containers in Elementor or Rows in WPBakery). For smooth transitions, ensure each section is tall enough to fill the viewport

• Apply the effect only to the main section wrapper

  While the option is available on every Container/Row, it’s recommended to enable it only on the main “parent” section of each page block. This ensures consistent background transitions without conflicts

• Avoid custom backgrounds inside the transitioning section

  If inner Containers, Columns, or Inner Rows have their own background colors or images, those backgrounds will remain visible and will not be overridden by the parent’s transition color. For the strongest visual impact, keep inner elements background‑free so the parent’s transitioning color remains dominant

• Plan your layout for readability

  When switching between light and dark backgrounds, consider using the Enter Text Color option to maintain proper contrast and ensure text remains readable throughout the scroll experience