Change background color when scroll trigger panel cross element

[Sndn]

Hello

 

I have panels showing through ScrollTrigger and an absolute right navigation with links to each panel section (not working in the CodePen). 

 

Im trying to get a similar effect as the mix-blend-mode: difference present on the CodePen. I want to make my points to be black or white only (depending on a function that determine the panel background brightness) when the panel is scrolling and crossing each point individually.

 

I tried several things but never succeed to find a solution. Is anybody with a hint or a solution to help me?  

 

Thank you in advance!

See the Pen BamGrNR by dmns (@dmns) on CodePen.

[OSUblake]

Sorry, I would have no idea how to do that with CSS alone, and it's not something GSAP can do for you, but maybe there is a clue in this article.

 

https://css-tricks.com/taming-blend-modes-difference-and-exclusion/