Two or 3 on a long page. If you need a chart to remember the sequence, you have too many.

Should the colour follow the thumb?

A short tween at the join is calmer than a scrub through the whole section. Scrub when the blend itself is the design.

What about images on top?

Photographs do not care. Type does. Check the stills, not only the motion.

Does this replace a progress bar?

No. A tint is a change of scene. Progress is how far.

What does reduced motion do?

Jump to the colour for the current section.

Background colour

Background colour shifts the page tint as someone moves from section to section, so a change of scene is felt in the whole view rather than only in the heading.

ScrollBuild difficulty: EasyScrollTrigger

Also called Colour shift, Scroll colour, Background tween, Theme on scroll, Section tint.

Here it is working.

Section 1

Section 2

Section 3

Scroll the box. Cream, then card, then a deeper cream.

For designers

You reach for this when the page has a few distinct scenes and a still cream field would make them feel like one long column. A dark band for a quote, a warmer field for a product, then back. Two or 3 shifts on a long page is a rhythm. A new tint every 200 pixels is a strobe. Contrast is the constraint. The type, links and borders have to survive both ends of the tween. Plan the pairs first, then animate the fill.

Use this when

The page has a few named scenes, and the tint helps someone feel the join.
Every state already meets contrast for type, links and controls.
The shift is tied to a section entering, not to every pixel of scroll unless the blend is the point.
Reduced motion can jump to the new colour, or sit on one still field.

Reach for something else when

You wanted depth, not a tint. Use Parallax.
You wanted a block to arrive. Use Element reveal or Mask reveal.
You wanted a cue for how far through the page someone is. Use Progress.
Named steps should hold the screen. Use Step-by-step timeline.
One image should fit a sequence of frames. Use Flip zone.

How to build it

Paint the colour on one fixed layer behind the content, or on the body, not on every section box. Give each section a colour it owns. As the section crosses a point in the viewport, tween the shared layer to that colour. ScrollTrigger on each section is the route. Scrubbing the mix between two sections can work if the join is long. Scrubbing through 8 hex values on a short page looks muddy. Test the header, a hide header if you have one, and inverted type. On reduced motion, snap to the section colour when it becomes current.

Official GSAP

ScrollTrigger toggling backgroundColor.

ScrollTrigger.create({
  trigger: zone, start: 'top 50%',
  onEnter: () => gsap.to(page, { backgroundColor: zone.dataset.color }),
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How many shifts?: Two or 3 on a long page. If you need a chart to remember the sequence, you have too many.
Should the colour follow the thumb?: A short tween at the join is calmer than a scrub through the whole section. Scrub when the blend itself is the design.
What about images on top?: Photographs do not care. Type does. Check the stills, not only the motion.
Does this replace a progress bar?: No. A tint is a change of scene. Progress is how far.
What does reduced motion do?: Jump to the colour for the current section.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Mask reveal