signifly.

01 — One shared background

Every section here is transparent.

The page itself owns the color. Keep scrolling — the next section is dark-themed, and the whole page will fade with it.

02 — Fade to black

Cross the middle of the viewport and the page goes dark.

A ScrollTrigger per section fires at the 50% line and tweens the wrapper's background-color and color. Everything drawn in currentColor inverts with it — including the header and divider up top.

03 — And back to white

Scrolling up replays it in reverse.

onEnter and onEnterBack both apply the section's theme, so the fade is direction-agnostic — no separate leave logic needed.

04 — Any palette

Not just black and white.

Sections can declare custom bg / fg values instead of a named theme — the engine just tweens whatever it's handed.

05 — That's the whole trick

Transparent sections. One tweened element.

About thirty lines of JavaScript: one ScrollTrigger per section, one gsap.to on the wrapper, and currentColor doing the rest.