220713

 

 

* gsap CSSRulePlugin

 >> 원래 js에서는 css 가상객체 ::before, ::after(content: " ";)를 targeting 하는 것이 불가능

 >> gsap 라이브러리에서 이를 targeting 하는 방법을 별도로 제공,

      이 방법을 이용해서 애니메이션을 주는 것이 가능하다!

 

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

Docs

 

 

 

 

 

js script 추가

 

 

 

html >> id/class

 

 

 

css >> 가상객체 위치경로 정확히 확인!

 

 

 

 

gsap.from(CSSRulePlugin.getRule("css에 찍혀있는 그대로의 경로를 가져다 써야함!"), {

  (* 또한 애니메이션으로 나타내기, 이동, 크기변화 등의 변화를 주기 위해서는 아래와 같이 쓴다.)

  cssRule: { 속성 : 속성값 }

});