[javascript] TweenMax를 사용하여 애니메이션의 크기와 위치를 어떻게 제어할 수 있나요?

27 Nov 2023

javascript

요소의 크기를 제어하기 위해 to() 메서드를 사용할 수 있습니다. 아래의 예시를 참고해보세요:

// div 요소를 가로폭 500px로 크기를 조정하는 애니메이션
TweenMax.to('div', 1, {width: 500});

// div 요소를 200px로 너비와 높이를 조정하는 애니메이션
TweenMax.to('div', 1, {width: 200, height: 200});

요소의 위치를 제어하기 위해서는 요소의 left와 top 속성을 조정할 수 있습니다. 아래의 예시를 살펴보세요:

// div 요소를 100px 왼쪽으로 이동하는 애니메이션
TweenMax.to('div', 1, {left: -100});

// div 요소를 200px 아래로 이동하는 애니메이션
TweenMax.to('div', 1, {top: 200});

위의 예시에서 1은 애니메이션 지속 시간을 나타냅니다. 지속 시간은 초 단위로 설정됩니다.

to() 메서드 외에도 from(), fromTo(), set() 등의 메서드를 사용하여 애니메이션을 구성할 수 있습니다. 자세한 내용은 TweenMax 문서를 참조해주세요.