Signifly Theme Fade
Scroll-driven page background theme fade (signifly.com). Sections are transparent; a single shared wrapper owns background-color and color. A ScrollTrigger per section fires at the viewport-center line (top 50% / bottom 50%) and tweens the wrapper to that section's theme in either scroll direction, so the whole page — sticky header included, via currentColor — fades to black, white, or any custom per-section palette. Respects prefers-reduced-motion with instant swaps.
Preview
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.
Source
import SigniflyThemeFade from "./index.jsx";
import { signiflyThemeFade } from "../demo-data.js";
export default function SigniflyThemeFadeDemo() {
return <SigniflyThemeFade {...signiflyThemeFade} />;
}
Dependencies
gsap@gsap/react
Related Components
