CSS 버버릇에 GSAP (TweenMax) 사용하기

저는 Google의 Polymer에 정말 뛰어났습니다. GSAP를 좋아합니다. 지금까지 나는이 두 가지를 장애없이 함께 사용했습니다. 불행히도 문제가 발생했습니다 - 사용자 정의 CSS 변수로 GSAP (TweenMax를 구체적으로 사용)을 어떻게 사용합니까? 예를 들어

:
이 someElement의 someCssProperty을 변경하려면 I
TweenMax.to(someElement, 1, someCssProperty: "value");
하지만 someCssProperty 내가 형태 --some-custom-css-variable에 걸릴 CSS 변수를 애니메이션하기 위해 노력하고있어 문제가된다 할 것이다. 나는 (분명히 나에게 오류를 제공합니다)
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 오류 메시지 개발자 콘솔.CSS 버버릇에 GSAP (TweenMax) 사용하기

그래서 질문 : TweenMax (GSAP)를 사용하여 맞춤 CSS 변수에 애니메이션을 적용하는 방법은 무엇입니까? 어떤 도움 :)

편집에 대한

감사 :

내가 클래스를 사용하여 시도

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

을 통해 그러나이 요소 스타일을 변경 내가 함께 CSS에서 선언 한 것처럼 a

SomeElement:hover {}

tyle (애니메이션이 아니기 때문에 즉시 변경됩니다.)

출처

2016-07-09 Ankush

나는'GSAP''에 CSS를 variables''에 관련된 아무것도 찾을 수 없습니다 그것이 사용자 정의 변수를 지원하는지 확신하지 cssPlugin'. [GreenSock 포럼] (http://greensock.com/forums/forum/11-gsap/)은 지원에 대해 물어볼 수있는 최고의 장소 여야합니다. 하지만 다른 클래스를 할당하여 속성을 업데이트 해 볼 수 있습니다. 'updateStyles' 또는'native css support'를 사용해야 할 수도 있습니다. – a1626

지금은 일반 객체를 사용하여 수동으로 변수를 업데이트해야합니다.

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

출처

2016-07-09 17:11:44

CSS 버버릇에 GSAP (TweenMax) 사용하기

답변

관련 문제