Changing color on Scroll

There are many ways to do this effect. And it really depends on many criteria:

1. Do you need smooth changing colors on scroll with interpolation or do you need immediate changing color when the user reaches some point?
2. Do you need to change color from one to another or do you need to change them constantly after reaching some point?

We explain how to do this for both cases with different blocks.

So, if you need smooth interpolated color changing, you need to use Animation Container or GSAP option in Animation panel. Then, simply add a background color option and enable Interpolation speed.

This method is fastest, you can also change the color of a specific item from another trigger. For example, if specific text reaches center of view, then you can attach background/color to another element (check trigger options, it has custom trigger and custom action selectors)

Another way for this effect is to use an Interaction panel. This is more useful if you need to switch colors many times when a user reaches a specific point or you have complex switchers

Scroll down to see the effect

This setup is more complex, but more flexible.

So, we need to add our section and attach a specific class to it, let’s call it “bgchange”, you can attach classes and styles to it via Class system.

Now, we need to add sub-selector “.active .colorchange”. We will use it to reverse also colors of specific child items. Now, we need to add this class “colorchange” to items that we need to switch when the background changed.

Technically, you can skip this Class setup step if you just need to change backgrounds and colors. I am showing it to you because sometimes you need to use different reversed colors, for example, your main text will change to black but some specific text will change to blue colors. For this purpose, we will use “.active .colorchange” sub selectors because we can attach another color to it.

Now, let’s add default color to our section. We will use black background, white color and also css transition time set to 1 to make smooth changes.

Ok, now let’s setup Interaction layer

We will use the On-view trigger. Our whole section has inner rows, which will trigger color change. I added the Interaction layer to the first row, On view trigger. For actions I use

1. Remove the class “active” for the custom selector “.bgactive”.
2. Set CSS variable “background-color” to “black” for custom selector “.bgactive”.
3. Set CSS variable “color” to “white” for custom selector “.bgactive”.

So, our first section simply switch colors to default. We need this if you want to switch colors back when user returns to this section.

Now, in the second section, I set the Interaction layer with the next actions

1. Add the class “active” for the custom selector “.bgactive”.
2. Set CSS variable “background-color” to “white” for custom selector “.bgactive”.
3. Set CSS variable “color” to “black” for custom selector “.bgactive”.

Important here also to use Margin root property (you can click on 3 dots icons for presets) to use Centered view for our trigger, otherwise, colors will switch too early

This method has also one important benefit, you can disable it inside Admin area and continue to edit content as usual. Color change will be applied only on frontend and will not be annoying inside editor