TweenMax를 사용하면 애니메이션의 크기와 모양을 쉽게 변형할 수 있습니다. 전환(transition)과 트윈(tween)을 사용하여 요소의 스타일 속성을 직접 조작하거나, 애니메이션에 직접 효과를 적용할 수 있습니다.

다음은 TweenMax를 사용하여 요소의 크기와 모양을 변형하는 예제입니다:

// 요소 선택
const element = document.querySelector('.my-element');

// 애니메이션 시작
TweenMax.to(element, 1, {
  width: '200px', // 요소의 너비를 200px로 변경
  height: '300px', // 요소의 높이를 300px로 변경
  borderRadius: '50%', // 요소의 모서리를 원형으로 변경
  backgroundColor: '#ff0000', // 요소의 배경색을 빨간색으로 변경
  ease: Power1.easeInOut // 애니메이션의 이징 타입 설정
});

위 예제에서 .my-element 클래스를 가진 요소의 너비, 높이, 모서리, 배경색 등의 스타일 속성이 애니메이션 효과를 가지며 변경됩니다. TweenMax.to() 메서드를 사용하여 요소를 대상으로 애니메이션을 시작하고, duration 매개변수에 애니메이션의 지속 시간을 전달합니다. 나머지 매개변수에는 애니메이션 중에 변경될 속성과 값들을 객체 형태로 전달합니다.

또한, ease 매개변수를 사용하여 애니메이션의 이징 타입을 설정할 수 있습니다. Power1.easeInOut는 애니메이션이 처음에 느리게 시작하여 중간에 빨라지고 최종적으로 다시 느리게 끝나는 이징 효과를 가집니다.

TweenMax는 GreenSock Animation Platform (GSAP)의 일부로 제공되며, 더 많은 애니메이션 기능을 제공합니다. 해당 문서에서 자세한 내용을 확인할 수 있습니다.

참고 자료:

• GreenSock 공식 문서