Streaming live at 10am (PST)

Change background/text color on interactions (legacy)


Hi there,

I am trying to change the background color and the text color of some elements on the navigation bar when a certain element scrolls out of view. I was able to change its height, but not the styles related to color. Is it possible?

Thank you!



You might want to take a look at @drewroper site and the preview link so you can see how he did it -

Legacy interactions with the background changing colour on scroll - along the same lines?


Hi @StuM, not exactly. I was wondering if the interactions (legacy) allow to change elements other than opacity, height/width, opacity, transform, such as background color or text color…
I will work my around it, somehow, with the opacity option.

thanks, anyway!


@LHM Unfortunately that’s a limitation of the legacy interactions :grimacing: I think you’re on to the right track with using multiple layers and opacity, where you can fade out the top layer while revealing one of a different color underneath.

By the way, one of the main reasons it’s mostly limited to transform and opacity is that browsers can heavily optimize those properties by moving their animation to the GPU (Graphics Processing Unit) without having to rely on the main processor to recalculate every frame of the animation/transition. Here’s a handy article that has some background on how/why this works:


Hi @callmevlad - nice to see ya!

Just looking back at your original query @LHM - you say you are trying to achieve this on your navigation bar? There is of course the ‘current’ state of nav links if those are elements you are referring to?

So if the element scrolling into view was actually a section (with an ID) you could have the ‘nav links’ background and text colour change when the section becomes current, and back to original when another section becomes current. Each nav item could have it’s own colours too.

That’s not using IX1 or IX2, and I’m guessing it’s not quite what you are after - but thought I would throw it in just in case!