Streaming live at 10am (PST)

Custom cursors and color changes on scroll

Published: https://foliov3.webflow.io/

Read-Only Link: https://preview.webflow.com/preview/foliov3?utm_medium=preview_link&utm_source=dashboard&utm_content=foliov3&preview=89776cc2ae64425850d8719575a2e4da&mode=preview


Hello everyone,

I have recently added a custom cursor to my site that I’m having an issue with as I tweak it.

I have a fixed header, and as you scroll I have a color div that triggers to change the color of that text (so it’s always legible on the background its on). I also have an interaction that changes the custom cursor bg color and border color, depending on what class the panel has (e.g. Panel Dark has interaction Mouse Hover > Cursor on Dark)

The issue is that I can’t figure out how to have the header text colors change on scroll, but also have the custom cursor inherit the color they have. Right now, if you scroll down past the hero panel into the about intro, and mouse over my name or the menu trigger, you can see it inherits the white custom cursor vs. the dark one (because its on a light background, and the white was default since the page loads the header in white initially).

I have test blocks at the bottom that show the two classes I have that trigger the cursor interactions. What I am wondering is how to change those based off of the color on scroll trigger I have.

Hope this makes sense, if any questions let me know happy to clarify. Any help much appreciated.

Thank you!