Help using Interactions 2.0 to switch navigation colors between sections

[helmsmith (JT)]

Link to pototype below.

I’m trying to create a fixed navigation that switches from white to black (and vise versa) between sections of the site, so it’s always legible on different background colors.

In the past (with interactions 1), I’d basically have 2 copies of the navigation—one black, one white—and create an interaction for sections that would fade between them while hiding one and showing the other.

But with Interactions 2.0 so far I’m having a hard time getting this to work. My results never quite seem to be what i expect, and sometimes they seem inconsistent (ie, navigations will successfully switch colors once, but then won’t again).

I currently have a “Scroll into view” interaction on the second section that’s attempting this. Ideally i’d be able to apply the working interaction to any section with a lighter background on the site.

Any tips for getting this to work? Thanks folks.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[helmsmith (JT)]

I think i got it working. I think i was confused by the “initial state” setting. Once I turned it off it seemed to be operating as expected!

[StuM]

Hi @helmsmith

I’ve been having similar issues on a site featuring a full screen menu open close and dealing with black white backgrounds/section changes - are you able to leave the share link open a few days so I can analyse, or mind if I drop you a DM to take a look at mine?

Thanks!

[helmsmith (JT)]

No prob StuM. The site will likely evolve as I work on it the next few days, but the nav color change per section won’t go away.

Happy to peek at your project if I can squeeze in the time.

[StuM]

Awesome - thanks for that!