Add support for CSS custom property

Currently, there is no way I can animate CSS custom property with anime.js.

div {
  --progress: 100%;
  transform: scale(var(--progress));
}

You can use this to set CSS custom property:

el.style.setProperty('--progress', '40%')

[LukeTOBrien]

Hi,

I was just searching for this very thing and I came across this post, I this this would be an awesome feature.
I am using Anime in my app and it works really well.

Note: it’s common to define vars in the pseudoclass :root.

Vars can be defined in any element, I am using mine in SVG to set the fill colour, I have frame and I want to animate from one colour to the next. eg:

anime({
  targets: 'svg path',
  '--fill-colour': [
    { value: 'blue', duration: 1000, delay: 500 },
    { value: 'red', duration: 1000, delay: 500 }
  ],
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

[juliangarnier]

Interesting idea, will look a the feasibility later.