GSAP 제공하는 Style 트윈 기본 문법

GSAP 제공하는 Style 트윈 기본 문법

 

CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.

장점은 CSS Style 보다 코드가 좀 간편합니다.

GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.

 

GSAP	CSS
x:300	transform: translateX(300px), margin-left: 300px
y:300	transform: translateY(300px), margin-top: 300px
scaleX:2	transfome: scaleX(2)
scaleY:2	transfome: scaleY(2)
rotation:360	transform: rotate(360deg)
rotationX:180	transform: rotateX(180deg)
rotationY:180	transform: rotateY(180deg)
skewY:45	transform: skewY(45deg)
xPercent:45	transform: translateX(45%)
yPercent:45	transform: translateY(45%)