[javascript] TweenMax를 사용하여 애니메이션의 시간과 이동 경로를 어떻게 설정할 수 있나요?

27 Nov 2023

TweenMax는 GreenSock Animation Platform (GSAP)의 일부로, JavaScript를 사용하여 웹 애니메이션을 만들 수 있는 강력한 도구입니다. TweenMax를 사용하여 애니메이션의 시간과 이동 경로를 설정하는 방법을 알아보겠습니다.

시간 설정: TweenMax.to() 메서드를 사용하여 애니메이션 시간을 설정할 수 있습니다. 첫 번째 매개변수로 애니메이션 대상을 전달하고, 두 번째 매개변수로 지속 시간(in seconds 또는 milliseconds)을 전달합니다.

const element = document.querySelector('.element');
TweenMax.to(element, 1, { opacity: 0 }); // 1초 동안 element를 투명하게 만듭니다.

이동 경로 설정: TweenMax.to() 메서드의 세 번째 매개변수로 이동 경로를 설정할 수 있습니다. 이동 경로는 객체 형태로 전달되며, x, y 등의 속성을 사용하여 위치를 지정할 수 있습니다.

const element = document.querySelector('.element');
TweenMax.to(element, 1, { 
  x: 100, // x축으로 100px 이동
  y: 200, // y축으로 200px 이동
});

이동 경로에는 다양한 옵션을 추가로 설정할 수 있습니다. 예를 들어, ease 속성을 사용하여 애니메이션 속도를 조절할 수 있습니다.

const element = document.querySelector('.element');
TweenMax.to(element, 1, { 
  x: 100, 
  y: 200,
  ease: Power1.easeInOut, // 일정한 속도로 이동하도록 설정
});

TweenMax의 다양한 기능을 활용하여 애니메이션의 시간과 이동 경로를 설정할 수 있습니다. 자세한 내용은 GreenSock의 공식 문서를 참조하시기 바랍니다.