Scroll Color Sections — Free GSAP ScrollTrigger Color Shift

Scroll color sections is the effect where the entire page background smoothly shifts color as you move from one full-screen section to the next, each section owning its own palette — the immersive technique on product and portfolio sites that makes scrolling feel like changing rooms. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus plain HTML and CSS.

Palettes as data

Each section declares its theme with two attributes: data-bg for the background and data-fg for the text color. The script reads these when the section becomes active, so the palette lives in the markup, not the code — adding a section or recoloring one is a two-attribute change. One loop wires every section to the same logic.

Toggle on center crossing

For each section a ScrollTrigger is created with start: 'top center' and end: 'bottom center', so the trigger is "active" precisely while that section spans the middle of the viewport. Its onToggle callback checks self.isActive and themes the page to that section's colors. Using the viewport center as the boundary means the new palette takes over exactly when the new section dominates the screen — the most natural moment to switch — and reverts as you scroll back up.

Crossfade, not cut

The actual color change is a GSAP tween on document.body's backgroundColor and color with a short duration, so the page eases between palettes instead of snapping. overwrite: 'auto' cancels any in-flight color tween when a new one starts, which prevents flicker if you scroll quickly through several sections — the new target simply takes over from wherever the color currently is. A CSS transition on the body is also present as a fallback.

Why ScrollTrigger toggles fit this

This is a discrete state effect (which section is in charge), not a continuous scrub, so onToggle with active/inactive states is the right tool — far cleaner than computing scroll math by hand or stacking IntersectionObservers with threshold tuning. ScrollTrigger handles the enter/leave boundaries and the reverse direction automatically.

Tinted text for contrast

Because each palette sets both background and foreground, text stays readable on every theme — a light foreground on the dark plum, a warm one on amber. Pairing the two colors per section is what keeps contrast correct as the whole page recolors.

Customizing it

Add sections with their own palettes, change the crossfade duration, switch the boundary (e.g. top 60%), or also tween an accent variable for buttons and links. Pair it with a scroll parallax layers scene, a scroll zoom hero, or reveal on scroll content.