TweenMax는 JavaScript 애니메이션 라이브러리로, 웹 애플리케이션에서 다양한 요소를 애니메이션화하기 위해 사용됩니다. 객체의 크기와 회전을 애니메이션화하는 방법에 대해 알아보겠습니다.

크기 애니메이션

TweenMax에서 객체의 크기를 애니메이션화하기 위해서는 scaleX와 scaleY 속성을 사용합니다. 이 속성은 객체의 가로와 세로 크기를 조절하는데 사용됩니다.

아래의 예시 코드를 참고해보세요:

TweenMax.to(element, duration, { scaleX: 2, scaleY: 2 });

위의 코드에서 element는 애니메이션을 적용할 HTML 요소를 지정하고, duration은 애니메이션의 지속 시간을 나타냅니다. scaleX와 scaleY 속성의 값을 조정하여, 객체의 크기를 변경할 수 있습니다. 예를 들어, 위의 코드는 객체를 현재 크기의 2배로 확대합니다.

회전 애니메이션

TweenMax에서 객체의 회전을 애니메이션화하기 위해서는 rotation 속성을 사용합니다. 이 속성은 객체의 회전 각도를 조절하는데 사용됩니다.

아래의 예시 코드를 참고해보세요:

TweenMax.to(element, duration, { rotation: 180 });

위의 코드에서 element와 duration은 크기 애니메이션과 동일하게 사용됩니다. rotation 속성의 값을 조정하여, 객체를 해당 각도만큼 회전시킬 수 있습니다. 예를 들어, 위의 코드는 객체를 180도 회전시킵니다.

이렇게 TweenMax를 사용하여 객체의 크기와 회전을 애니메이션화할 수 있습니다. 더 자세한 사용법과 다른 속성들에 대해서는 GreenSock의 공식 문서를 참고하시기 바랍니다.

참고 문헌:

• GreenSock 공식 문서