CSSバラバイルでGSAP（TweenMax）を使用する

Question

私はGoogleのPolymerに本当に関心があります。私はGSAPを愛用しています。これまでは2つを一緒に使っていました。残念ながら私は今問題を抱えています - カスタムCSS変数を使用してGSAP（TweenMax固有）を使用するにはどうすればよいですか？例えば

：
someElementのsomeCssPropertyを変更するには、私は
TweenMax.to(someElement, 1, someCssProperty: "value");
だろうが、私は、フォーム--some-custom-css-variableを取るCSSの変数を、アニメーション化しようとしているときsomeCssPropertyが問題となります。 私は（明らかに私にエラーが発生します）
TweenMax.to(someElement, 1, --some-custom-css-Property: "value");
を使用しようとしましたし、私も
TweenMax.to(someElement, 1, "--some-custom-css-Property": "value");
（some-custom-Css-property周りの引用符）を使用しようとした - しかし、これは 変更なし/アニメーションで結果を、オンinvalid tween valueエラーメッセージ開発者コンソール

質問： TweenMax（GSAP）でカスタムCSS変数をアニメーション化するにはどうすればよいですか？任意の助け

感謝:)

EDIT：

私は

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

を通じてクラスを使用して試してみました。しかし、私はとCSSでそれを宣言していたかのように、これは要素のスタイルを変更しますa

SomeElement:hover {} 

tyle（アニメーション化されていないので、ただちに変更されます）

Answer 1

今のところ、汎用オブジェクトを使用して変数を手動で更新する必要があります。

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/" />