Animate SVG gradient color-stop

[maguskrool]

Hello. First of all, congratulations on your work, I've been using anime.js and it's amazing!

What I'm trying to do I'm trying to animate an SVG radial gradient, changing the color values for the 'color-stop' attribute on the <stop> element. I want to use anime.js, but so far no luck.

What I've got so far I've had success using <animate> inside <stop>, and I have a working codepen here. Here's my code:

//CSS
#tile-grid {
  width: 300px;
  height: 300px;
}
//HTML
<div>
  <svg id="tile-grid" class="svg-shape-01">
    <defs>
      <radialGradient id="radial-grad-01" cx="50%" cy="70%" r="60%" fx="50%" fy="90%">
        <stop class="grad-stop-01" offset="10%" stop-color="hsla(0,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(0,70%,50%,1); hsla(80,70%,50%,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
        <stop class="grad-stop-02" offset="100%" stop-color="hsla(30,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(30,70%,50%,1); hsla(240,70%,50%,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
      </radialGradient>
    </defs>
    <rect id="r1" width="200" height="200" fill="url(#radial-grad-01)" />
  </svg>
</div>

So <rect> is filled with the #radial-grad-01gradient, and that gradient is animated.

However, I'd really like to do the same thing using anime.js because the solution with poses some difficulties for me, like synchronising it with other anime.js animations using events like "complete".

I'm using anime.js to morph svg polygons with some randomness, and I'd like to add random hsla colors to the animation. I have a function that returns a random hsla color, but I can't get it to work with anime.js. The problem, however, lies with targeting the "stop-color" attribute for animation. Here's what I have:

//randHSLAColor() returns a string like 'hsla(50,60%,80%,0.4)'
function animGradient() {
        let rc1 = randHSLAColor();
        let rc2 = randHSLAColor();
        let gra1 = anime({
            targets: 'grad-stop-01',
            stopColor: rc1,
            easing: 'linear',
            duration: 1000
        });
        let gra2 = anime({
            targets: 'grad-stop-02',
            stopColor: rc2,
            easing: 'linear',
            duration: 1000
        });
    }

Other things I tried If I use "stop-color" instead of "stopColor" on animGradient() I get an error:

Uncaught SyntaxError: Unexpected token '-'

I've also tried to replace rc1 and rc2 with hardcoded values like 'hsla(80,70%,50%,1)', so I know the error is not coming from there.

Any thoughts on this? I'm not sure if what I'm trying to do is possible with animejs, maybe 'stop-color' is not animatable, or maybe I'm just not writing the function correctly.

Thank you!

[Losses]

Define an object calls animationParameters, put your variables into this object, update stop-color manually inside onChange lifecycle, this may work.

another thing, have you tried syntax like this?

{
  'stop-color': rc2,
}

add a quote will fix your syntax error.

[maguskrool]

Thank you so much @Losses, using quotes did the trick! I'll also keep in mind your first suggestion in case I come across something that's not solved by the quotes.