Using GSAP (TweenMax) on css varabiles

Question

I'm really into Google's Polymer and I love GSAP - and so far I've been using the two in conjunction without a hitch. Unfortunately I have now hit a problem - how do I use GSAP (TweenMax to be specific) with custom css variables?

For example:
To change someCssProperty of someElement I would
TweenMax.to(someElement, 1, someCssProperty: "value");
but the someCssProperty becomes an issue when I'm trying to animate a css variable, which take on the form --some-custom-css-variable . I have tried to use
TweenMax.to(someElement, 1, --some-custom-css-Property: "value");
(obviously gives me errors) and I also tried to use
TweenMax.to(someElement, 1, "--some-custom-css-Property": "value");
(quotes around the some-custom-Css-property) - however this results in no change/animation and an invalid tween value error message on the developer console.

So the question is: how would I go about animating custom css variables with TweenMax (GSAP)?

Thanks for any help :)

EDIT:

I have tried using classes through

TweenMax.to("SomeElement", 5, {className:"class2"});

But this changed the element style as if I had declared it in css with a

SomeElement:hover {}

style (as in it does not animate, just changes immediately)

Answer 1

For now, you're going to have to manually update the variable using a generic object.

var docElement = document.documentElement;

var tl = new TimelineMax({ repeat: -1, yoyo: true, onUpdate: updateRoot });
var cs = getComputedStyle(docElement, null);

var blur = {
  value: cs.getPropertyValue("--blur")
};

tl.to(blur, 2, { value: "25px" });

function updateRoot() {
  docElement.style.setProperty("--blur", blur.value);
}

:root {
  --blur: 0px;
}

img {
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<img src="http://lorempixel.com/400/400/" />