How to make smooth color transitions when using a loop?

Question

I have a loop that changes the background color of a page, but the transitions are just too rough. I was wondering if there's a way to apply an effect to smooth them. Something like "ease" when using CSS.

let x = document.body;
let color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
    x.style.backgroundColor = color[Math.floor(Math.random() * 3)];  
  }
}, 1000);

body {
  background-color: black;  
}

You need to use CSS transition properties. Please read this https://stackoverflow.com/questions/4411306/transition-of-background-color — Samuli Hakoniemi, Mar 08 '22 at 10:44
What is the point of the for-loop? You update the background colour four times each second. Yet the view/page only displays the last background colour set, because it doesn't update whilst JavaScript is executing. If you where to remove the for-loop, you would have the same effect. — 3limin4t0r, Mar 08 '22 at 11:01

Pablo Salcedo T. · Accepted Answer · 2022-03-08T10:51:26.177

Use css transition property

CSS

let x = document.body;
let color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
    x.style.backgroundColor = color[Math.floor(Math.random() * 3)];
  }
}, 1000);

body {
  background-color: black;
  transition: background-color 2s;
}

JS

let x = document.body;
let color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
    x.style.backgroundColor = color[Math.floor(Math.random() * 3)];
    x.style.transition = 'background-color 2s';
  }
}, 1000);

body {
  background-color: black;
}

score 0 · Answer 2 · answered Mar 08 '22 at 11:07

CSS transition (as in Pablo's answer) is likely the easiest solution.

However, the colors get a grey-ish tint during the transition. This is a side-effect of RGB color interpolation. Relevant blog article explaining the color interpolations in detail: here.

An alternative solution is to use a different color interpolation algorithm in javascript.

d3-interpolate javascript library provides a variety of color interpolation algorithm.

The snippet below shows how to smoothly transition colors using d3.interpolateLab function.

let x = d3.select('body');
let color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
       let currentColor = x.style('background-color')
       
       x.transition()
        .duration(800)
       .styleTween('background-color'
        , function() {
          return d3.interpolateLab(
            currentColor
            , color[Math.floor(Math.random() * 3)]
           )
         })
       }
    
}, 1000);

body {
  background-color: black;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

How to make smooth color transitions when using a loop?

2 Answers2