[Using GSAP (TweenMax) on css varabiles]

Yep that looks perfect. I did some testing with a simple div and other CSS properties, and so far it's worked perfectly I'm glad it's being added to the CSSplugin.  

[Using GSAP (TweenMax) on css varabiles]

The CSSRulePlugin didn't seem to work, so for now you're probably going to have to manually update the variable using a generic object.

See the Pen f3a6dffce455ecb1caa48641e3ecd278?editors=0010 by osublake (@osublake) on CodePen

Thank you so much for a clear and simple solution Hopefully in the near-future greensock's Css plugin will be able to support css variables - until then thanks for the quick and awesome solution! 

[Using GSAP (TweenMax) on css varabiles]

 

Just want to say that I've posted the same question on StackOverflow, but figured I would post it here too  

 

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

part 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)