Scroll-Based Background Color Change with Next Bricks Animator

In this tutorial, we’ll create a smooth background color transition effect triggered by scroll. As the user scrolls down the page, the background color will change (for example, from beige to black), and then revert back as they keep scrolling.

We’ll use GSAP animations via the Next Bricks Animator plugin inside Bricks Builder. This is a great way to bring subtle interactivity and a modern feel to your website.

A full step-by-step video is included below, and you can follow along using the written guide.

Step-by-step Guide

1. Open your page inside Bricks Builder
2. Wrap all content Sections inside one DIV
3. Give that DIV a class, e.g. .body-div
4. Set the default background color (e.g. beige) for this .body-div

Creating the First Scroll Animation (Light → Dark)

1. Open the Next Bricks Animator panel
2. Create a new Timeline inside a folder
3. Set the Event to On Scroll
4. Set Breakpoint: min 368px (to support mobile)
5. Add the CSS ID of the Section where the color change should happen
6. Set Scroll Position: Start: top center // End: top top
7. Enable Scrub, and set it to 0.5

Add the Animation

1. Target Element: .body-div
2. Duration: 0.2
3. Easing: None
4. Method: From To

Set the background color transition

1. From: the current color (e.g. beige)
2. To: the new color (e.g. black)

Your first scroll-based color change is now ready!

🌓 Don’t Forget the Text Colors

If you’re switching from a light background to a dark one, make sure your text remains visible.
One trick: use Mix Blend Mode: Difference on your text elements — this way they adapt automatically to both backgrounds.

Creating the Reverse Timeline (Dark → Light)

To reverse the background color (e.g. from black back to beige):

1. Duplicate the steps above
2. Use a different Section ID as the new trigger
3. In the animation settings, leave the From color empty
4. Set only the To color (e.g. beige)

Now as users scroll through your page, the background color transitions smoothly between two (or more) colors, creating a dynamic experience without needing custom JavaScript, only Next Bricks Animator.