TweenMax는 JavaScript 애니메이션 라이브러리 중 하나로, 애니메이션 요소의 속성을 부드럽게 변경할 수 있습니다. 애니메이션의 너비와 높이를 변경하는 데 TweenMax를 사용하는 방법을 알아보겠습니다.

먼저, TweenMax를 HTML 문서에 포함시켜야 합니다. 아래와 같은 코드를 사용하여 TweenMax를 가져올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>

이제 애니메이션할 요소를 선택해야 합니다. 가로 너비와 세로 높이를 변경하려는 요소를 선택하고 변수에 할당합니다. 예를 들어, 아래와 같은 코드로 요소를 선택할 수 있습니다.

const element = document.querySelector('.element-class');

선택한 요소에 애니메이션을 적용하려면 TweenMax.to() 메서드를 사용합니다. 너비와 높이를 변경하기 위해 “width”와 “height” 속성을 사용합니다. 예를 들어, 요소의 너비를 500px로, 높이를 300px로 변경하려면 아래와 같은 코드를 사용할 수 있습니다.

TweenMax.to(element, 1, { width: "500px", height: "300px" });

위의 코드에서, 첫 번째 인수로 요소를 전달하고, 두 번째 인수로 애니메이션의 지속 시간을 전달합니다(여기에서는 1초로 설정되었습니다). 마지막 인수로는 변경하려는 속성과 값의 객체를 전달합니다.

이제 이 코드를 실행하면 요소가 1초 동안 부드럽게 너비가 500px로, 높이가 300px로 변경될 것입니다.

TweenMax를 사용하여 애니메이션의 너비와 높이를 변경하는 방법에 대해 알아보았습니다. 더 다양한 애니메이션 효과를 적용하려면 TweenMax 문서를 참조하시기 바랍니다.

참조:

• TweenMax 문서: https://greensock.com/docs/v3