I have a mesh gradient in my background, when a button is clicked a function changes the position of the colors of the gradient. How can I add some transition so the change occurs more smoothly? Is there a React spring feature I could use? Here is the codesandbox link

This is the function that changes the background

function shuffleColors() {
    let colors = [
      "hsla(316,81%,62%,1)",
      "hsla(30,69%,62%,1)",
      "hsla(350,63%,61%,1)",
      "hsla(257,99%,72%,1)",
      "hsla(64,85%,68%,1)",
      "hsla(112,77%,76%,1)"
    ];
    let newArr = [];
    let copy = colors.slice(0);
    do {
      let index = Math.floor(Math.random() * copy.length);
      let item = copy[index];
      newArr.push(item);
      copy.splice(index, 1);
    } while (copy.length >= 1);

    const r = document.querySelector(":root");

    r.style.setProperty("--color1", newArr[0]);
    r.style.setProperty("--color2", newArr[1]);
    r.style.setProperty("--color3", newArr[2]);
    r.style.setProperty("--color4", newArr[3]);
    r.style.setProperty("--color5", newArr[4]);
    r.style.setProperty("--color6", newArr[5]);
  }

CodePudding user response：

In the example you've given where you're applying a background color to the body, you won't be able to animate this with react-spring because you can't wrap the body in the animated element.

I would therefore suggest you use a wrapper element & apply the background that way. Then it's simple string interpolation, here's a codesandbox illustrating the solution – https://codesandbox.io/s/quote-machine-forked-80u5rx