Multiple value CSS properties

Hi, I was attempting to animate between CSS properties with multiple values. For example, backgroundPosition: ['0 0%', '0 100%'], Also, it would be nice to do this with CSS values that accept multiple declarations, like multiple backgrounds. backgroundPosition: ['0 0, 0 0%', '0 0, 0 100%'], I was having trouble animating values that contained more than one number, but this could be useful for colors also: backgroundImage: ['linear-gradient( 90deg, #eee, #fff)', 'linear-gradient( 90deg, #ccc, #fff)'];

Not sure if I’m doing something wrong. I tried using a + to add string values to the number I wanted to animate, and that didn’t work either.

Also, I couldn’t get it to synchronize animating a clip path from an initial value (or one set with CSS) the first time an animation is played.

[juliangarnier]

Is there any way to add a custom duration to a specific property?

Yes like this:

var animation = anime({
  targets: gradients,
  start: {
    value: '#8453E3',
    duration: 4000,
    easing: 'easeOutExpo'
  },
  end: {
    value: '#FBF38C',
    duration: 2000,
    easing: 'easeOutQuad'
  },
...

[BrisaBoards]

@kalpriksh If you click the settings icon next to the JS box, you can click in the CDN search box, type animejs, select the first one, and when you close it, it’ll reload and start working 😃