Animation Engine
Scroll Color Shift
Give each Section a target colour and the whole page background morphs from one to the next as the visitor scrolls — the smooth, section-to-section colour journey. One setting per Section; the transition is handled for you.
Live demo
See it in action
Section-to-section colour
The page changes colour as you scroll.
Each band below sets a target page colour; as it reaches the middle of the screen the whole background eases to it. Keep scrolling through the four bands to watch the journey. One field per Section.
Band 1
Deep space
The background eases to this section’s colour as you reach it.
Band 2
Deep teal
Scroll on — the page morphs from the last colour to this one.
Band 3
Royal indigo
No images, no canvas — just a CSS background transition, driven by scroll.
Band 4
Warm plum
Optionally shift the text colour too, so it stays readable on every band.
How to set it up
Add it in under a minute
- Open each Section in a run → Animations → Scroll Color Shift.
- Set the Page colour (and optionally a text colour) for that section.
- Repeat for the next sections with different colours.
- Save and scroll — the background morphs section to section.