[javascript] TweenMax를 사용하여 애니메이션의 크기와 위치를 동시에 조절할 수 있나요?

27 Nov 2023

javascript

다음은 TweenMax를 사용하여 애니메이션의 크기와 위치를 조절하는 예시 코드입니다:

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

// 애니메이션 설정
TweenMax.to(element, 1, {
  width: '200px', // 크기 조절
  x: '100px', // x 축 위치 조절
  y: '50px', // y 축 위치 조절
  ease: Power1.easeInOut // 애니메이션의 이징 설정
});

위의 코드에서는 element라는 클래스를 가진 HTML 요소를 선택하고, to 메소드를 사용하여 해당 요소의 크기와 위치를 조절하고 있습니다. width는 애니메이션의 크기를 설정하고, x와 y는 요소의 좌표를 변경하여 위치를 조절합니다. ease는 애니메이션의 이징 효과를 설정할 수 있습니다.

TweenMax를 사용하면 여러 요소를 동시에 애니메이션할 수도 있으며, 다양한 애니메이션 속성들을 조합하여 원하는 효과를 만들 수 있습니다.

더 많은 TweenMax의 기능과 사용법에 대해서는 GSAP의 공식 문서를 참조하시기 바랍니다. (https://greensock.com/docs/)

[참고 자료]

GSAP(GreenSock Animation Platform) 공식 사이트: https://greensock.com/
GSAP 문서: https://greensock.com/docs/