[javascript] TweenMax에서 애니메이션의 회전과 이동을 어떻게 동시에 구현할 수 있나요?

27 Nov 2023

javascript

var element = document.getElementById("myElement");

TweenMax.to(element, 1, {
  x: 200, // x축으로 200px 이동
  rotation: 180, // 180도 회전
  ease: Power1.easeInOut // 이동과 회전에 적용되는 이징 함수 설정
});

위의 코드를 실행하면 “myElement”라는 ID를 가진 요소가 1초 동안 오른쪽으로 200px 이동하면서 동시에 180도 회전합니다. ease 속성을 사용하여 이징 함수를 설정하여 움직임을 조정할 수 있습니다.

TweenMax는 매우 강력한 애니메이션 라이브러리이며, 회전과 이동뿐만 아니라 다양한 애니메이션 효과를 동시에 구현할 수 있습니다. 자세한 내용은 GreenSock의 공식 문서를 참조하시기 바랍니다.

GreenSock 공식 문서: https://greensock.com/docs/

참고: 위의 코드를 실행하기 위해서는 먼저 TweenMax 라이브러리를 로드해야 합니다.